Top Nav Bar - Copy this React, Tailwind Component to your project

<header className="bg-white shadow-sm py-4 mb-4"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex justify-between items-center" > <div className="flex items-center"> <h1 className="ml-2 text-xl font-bold text-primary-700">{title}</h1> </div> <div className="relative" ref={dropdownRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > <button className="flex items-center space-x-2 bg-white hover:bg-gray-100 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-primary-500" aria-expanded={isDropdownOpen} aria-haspopup="true" > <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde" alt="User Profile" className="h-8 w-8 rounded-full object-cover" /> <span className="hidden md:block text-gray-700">Logged In</span> </button> {isDropdownOpen && ( <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-200"> <button className="flex items-center w-full px-4 py-2 text-sm text-danger-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100" onClick={handleLogout} > <FaSignOutAlt className="mr-2" /> Logout </button> </div> )} </div> </div> </div> </header> add a background to this