Advanced Search Component - Copy this Html, Tailwind Component to your project

I want you to create a page it is responsive ok in the page there is a search bar when i write number so the related field come at top {% extends 'base.html' %} {% block title %}Order List{% endblock %} {% block content %} <! Search bar section > <div class="mb 8"> <form method="GET" action="{% url 'order_list' %}"> <input type="text" name="order_id" placeholder="Search by Order ID" class="w full p 2 rounded lg shadow md" value="{{ request.GET.order_id }}"> <button type="submit" class="mt 4 button color button hover text white font bold py 2 px 4 rounded lg shadow lg transition duration 200 transform hover:scale 105"> Search </button> </form> </div> <section> <h3 class="text 3xl font semibold text black mb 4">Orders</h3> {% if orders %} <div class="w full overflow x auto"> <table class="w full bg white shadow md rounded lg overflow hidden"> <thead class="background color text white"> <tr> <th class="py 3 px 4 text left">Order ID</th> <th class="py 3 px 4 text left">Entry User</th> <th class="py 3 px 4 text left">Total Price</th> <th class="py 3 px 4 text left">Total Discount</th> <th class="py 3 px 4 text left">Created At</th> <th class="py 3 px 4 text left">Customer</th> <th class="py 3 px 4 text left">Actions</th> </tr> </thead> <tbody> {% for order in orders %} <tr class="border b border gray 200 hover:bg gray 100 transition duration 200"> <td class="py 3 px 4 whitespace nowrap">{{ order.id }}</td> <td class="py 3 px 4 whitespace nowrap">{{ order.entry_user.username }}</td> <td class="py 3 px 4 whitespace nowrap">PKR={{ order.total_price }}</td> <td class="py 3 px 4 whitespace nowrap">PKR={{ order.total_discount }}</td> <td class="py 3 px 4 whitespace nowrap">{{ order.created_at }}</td> <td class="py 3 px 4 whitespace nowrap">{{ order.customer.name }}</td> <td class="py 3 px 4 whitespace nowrap"> <a href="{% url 'order_detail' order.id %}" class="button color button hover text white font bold py 1 px 2 rounded text sm">View Details</a> </td> </tr> {% endfor %} </tbody> </table> </div> {% else %} <p class="text gray 600 text center py 4">No orders found for this branch.</p> {% endif %} </section> </div> </main> {% endblock %}