Header - Copy this React, Tailwind Component to your project

Import { useState } from "react"; import { FaBars, FaTimes, FaChevronDown } from "react icons/fa"; const Header = () => { const [isNavOpen, setIsNavOpen] = useState(false); const [isLangOpen, setIsLangOpen] = useState(false); const languages = [ { code: "EN", name: "English" }, { code: "ES", name: "Spanish" }, { code: "FR", name: "French" }, { code: "DE", name: "German" } ]; const navItems = [ { name: "Home", href: "#" }, { name: "Products", href: "#" }, { name: "Services", href: "#" }, { name: "About", href: "#" }, { name: "Contact", href: "#" } ]; const [selectedLang, setSelectedLang] = useState(languages[0]); return ( <header className="bg white shadow lg fixed w full top 0 z 50"> <div className="max w 7xl mx auto px 4 sm:px 6 lg:px 8"> <div className="flex justify between items center h 16"> <div className="flex 1 flex items center justify start"> <button className="md:hidden p 2 rounded md text gray 600 hover:text gray 900 hover:bg gray 100 focus:outline none" onClick={() => setIsNavOpen(!isNavOpen)} > {isNavOpen ? ( <FaTimes className="h 6 w 6" /> ) : ( <FaBars className="h 6 w 6" /> )} </button> </div> <div className="flex 1 flex items center justify center"> <div className="h 12 w auto relative overflow hidden"> <img src="https://images.unsplash.com/photo 1599305445671 ac291c95aaa9" alt="Logo" className="h full w auto object contain" onError={(e) => { e.target.src = "https://images.unsplash.com/photo 1599305445671 ac291c95aaa9"; e.target.alt = "Fallback Logo"; }} /> </div> </div> <div className="flex 1 flex items center justify end"> <div className="relative"> <button className="flex items center space x 2 p 2 rounded md text gray 600 hover:text gray 900 hover:bg gray 100 focus:outline none" onClick={() => setIsLangOpen(!isLangOpen)} > <span>{selectedLang.code}</span> <FaChevronDown className={`transition transform duration 200 ${isLangOpen ? "rotate 180" : ""}`} /> </button> {isLangOpen && ( <div className="absolute right 0 mt 2 w 48 rounded md shadow lg bg white ring 1 ring black ring opacity 5"> <div className="py 1" role="menu"> {languages.map((lang) => ( <button key={lang.code} className="block w full text left px 4 py 2 text sm text gray 700 hover:bg gray 100" onClick={() => { setSelectedLang(lang); setIsLangOpen(false); }} > {lang.name} </button> ))} </div> </div> )} </div> </div> </div> {/* Mobile Navigation */} <div className={`md:hidden transition all duration 300 ease in out ${ isNavOpen ? "max h 96 opacity 100" : "max h 0 opacity 0 overflow hidden" }`} > <nav className="px 2 pt 2 pb 3 space y 1"> {navItems.map((item) => ( <a key={item.name} href={item.href} className="block px 3 py 2 rounded md text base font medium text gray 700 hover:text gray 900 hover:bg gray 50" > {item.name} </a> ))} </nav> </div> {/* Desktop Navigation */} <nav className="hidden md:flex space x 8 justify center py 2"> {navItems.map((item) => ( <a key={item.name} href={item.href} className="text gray 600 hover:text gray 900 px 3 py 2 rounded md text sm font medium" > {item.name} </a> ))} </nav> </div> </header> ); }; export default Header; In this make About a dropdown