用于电子商务的复古/复古风格的灰度导航组件,具有中等复杂性,具有悬停和下拉列表等交互元素。它是响应式的,包括使用 Tailwind CSS 的深色模式支持。
<nav class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-md"> <div class="container mx-auto px-4 py-4 flex justify-between items-center"> <div class="text-lg font-bold">RetroShop</div> <div class="hidden md:flex space-x-6"> <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a> <div class="relative group"> <button class="hover:text-gray-900 dark:hover:text-white transition duration-300">Shop</button> <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg mt-2 py-2 w-48"> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">All Products</a> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 1</a> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 2</a> </div> </div> <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">About</a> <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a> </div> <div class="flex items-center space-x-4"> <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /> </svg> </a> <button class="md:hidden"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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> </div> </div> </nav>
一个适用于社交媒体应用程序的简单响应式导航组件,具有深色主题和受 Material Design 启发的互补配色方案。它包括 logo、导航链接和用户头像。
一个简单、响应式的导航组件,适用于求职板或职业发展平台,具有海洋/蓝色调、悬停时的微交互和深色模式支持。
用于仪表板的复古导航组件,具有具有互补色的复杂布局、响应式设计和使用 Tailwind CSS 的深色主题支持。它包括 logo、导航链接、搜索栏和用户配置文件信息。