Pharmacy Search - Copy this React, Tailwind Component to your project

Design an HTML page for a pharmacy search interface with the following features: Heading: At the top of the page, include the title "National Pharmacy" in bold. Search Form: Create a form with the following elements: Text Input Field: For entering the name of the medicine with the placeholder "Enter medicine name". Dropdown (Search Type): A dropdown menu with options: Contains Starts With Ends With First and Last Letter (fnl) Dropdown (Category): A dynamic dropdown menu with categories pulled from a backend. Example: {% for category in categories %} <option value="{{ category.name }}">{{ category.name }}</option> {% endfor %}. Search Button: A button labeled "Search". Results Section: Below the form, create an empty div that will display search results dynamically. JavaScript Functionality: Write a JavaScript function that listens to the form submission and prevents the default submission action. When the form is submitted: It fetches data from /api/search/ with query parameters for search_type, search_text, and category. It renders each search result inside the results div, showing the medicine name, price, and availability.