Navbar - Copy this React, Tailwind Component to your project
My navbar is this import React from 'react'; import Logo from '../logo'; import '../Navbar.css'; function Navbar() { return ( <nav> <Logo /> <ul className='navul'> <li><a href="/">Dashboard</a></li> <li><a href="/customers">Customers</a></li> <li className="dropdown"> <a href="/inventories" className="dropbtn">Inventory</a> <div className="dropdown content"> <a href="/inventories">Stock Items</a> <a href="/units">Units</a> <a href="/categories">Categories</a> </div> </li> <li><a href="/orders">Orders</a></li> </ul> </nav> ); } export default Navbar nav { display: flex; justify content: space between; align items: center; padding: 10px; background color: #7A5C61; } .navul { list style: none; display: flex; gap: 3rem; margin: 0; padding: 0; font family: 'Courier New', Courier, monospace; font size: 2rem; margin top: 5px; margin left: 10px; background color: #7A5C61; } .navul li { position: relative; /* Needed for dropdown positioning */ background color: #7A5C61; } a { text decoration: none; color: rgb(7, 7, 7); background color: #7A5C61; } /* Dropdown Menu */ .dropdown .dropbtn { color: rgb(7, 7, 7); background color: transparent; border: none; cursor: pointer; font size: inherit; font family: inherit; } .dropdown content { display: none; position: absolute; min width: 160px; box shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z index: 1; } .dropdown content a { color: black; padding: 12px 16px; text decoration: none; display: block; text align: left; font size: 1.6rem; /* Keep consistent with your style */ } .dropdown content a:hover { /* background color: #f1f1f1; */ } .dropdown:hover .dropdown content { display: block; } .search container { margin left: auto; /* Pushes the search input to the right */ } .search container input { width: 20em; border: 1px solid #ccc; border radius: 3px; outline: none; font size: 1rem; } i know this is not look like professional i want that this navbar should be responsive in mobile, tablet, iphones, ipads, and all computer and all devices
