HTML 代码
<nav class="bg-zinc-900 text-gray-200 dark:bg-gray-950 dark:text-gray-100 shadow-lg dark:shadow-xl">
<div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
<!-- Logo Section -->
<div class="flex items-center space-x-3 mb-2 md:mb-0">
<svg class="h-9 w-9 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10l-3-3m0 0l-3 3m3-3V4m3 10h4.876a.625.625 0 01.352 1.157l-1.587 1.587A.625.625 0 0115.124 18H10z" />
</svg>
<span class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-green-600">StreamVerse</span>
</div>
<!-- Search Bar -->
<div class="relative flex-grow mx-4 max-w-lg w-full mb-2 md:mb-0">
<input type="text" placeholder="Search movies, series, and more..." class="w-full py-2 pl-10 pr-4 rounded-full bg-zinc-800 dark:bg-gray-800 text-gray-200 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-300 ease-in-out">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<!-- Main Navigation Links -->
<div class="hidden lg:flex items-center space-x-6">
<a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
Home
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
<a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
Movies
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
<a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
Series
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
<a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
Live TV
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
</div>
<!-- User Profile and Notifications -->
<div class="flex items-center space-x-6 ml-auto">
<button class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 focus:outline-none">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-sm font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
</button>
<div class="relative group">
<img class="h-10 w-10 rounded-full border-2 border-emerald-500 object-cover cursor-pointer" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
<div class="absolute hidden group-hover:block right-0 mt-2 w-48 bg-zinc-800 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden z-10">
<a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Profile</a>
<a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Watchlist</a>
<a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Settings</a>
<a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Logout</a>
</div>
</div>
</div>
<!-- Mobile Menu Button -->
<div class="lg:hidden ml-4">
<button class="text-gray-300 hover:text-emerald-400 focus:outline-none peer">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<!-- Mobile Menu Content -->
<div class="hidden peer-focus:block absolute top-full left-0 w-full bg-zinc-800 dark:bg-gray-800 shadow-lg py-2 mt-1 z-20 transition-all duration-300 ease-out origin-top">
<a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Home</a>
<a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Movies</a>
<a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Series</a>
<a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Live TV</a>
<div class="border-t border-gray-700 my-2"></div>
<a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Profile</a>
<a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Watchlist</a>
<a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Settings</a>
<a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Logout</a>
</div>
</div>
</div>
</nav>