为社交媒体界面设计的响应式导航组件,采用Material Design美学,使用暗主题和Tailwind CSS。
<nav class="bg-gray-800 dark:bg-gray-900 p-4 shadow-lg"> <div class="flex items-center justify-between"> <a href="#" class="text-white text-lg font-semibold">Logo</a> <div class="hidden md:flex space-x-4"> <a href="#" class="text-gray-300 hover:text-white">Home</a> <a href="#" class="text-gray-300 hover:text-white">Explore</a> <a href="#" class="text-gray-300 hover:text-white">Notifications</a> <a href="#" class="text-gray-300 hover:text-white">Messages</a> <a href="#" class="text-gray-300 hover:text-white">Profile</a> </div> <div class="md:hidden"> <button class="text-gray-300 hover:text-white focus:outline-none" aria-label="Menu"> <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 12h16m-7 6h7" /> </svg> </button> </div> </div> <div class="mt-4 md:hidden"> <a href="#" class="block text-gray-300 hover:text-white">Home</a> <a href="#" class="block text-gray-300 hover:text-white">Explore</a> <a href="#" class="block text-gray-300 hover:text-white">Notifications</a> <a href="#" class="block text-gray-300 hover:text-white">Messages</a> <a href="#" class="block text-gray-300 hover:text-white">Profile</a> </div> </nav> <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4"> <h2 class="text-white text-lg font-semibold">Friends</h2> <div class="flex space-x-4 mt-2"> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"> <span class="text-gray-300 ml-2">User 1</span> </div> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"> <span class="text-gray-300 ml-2">User 2</span> </div> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"> <span class="text-gray-300 ml-2">User 3</span> </div> </div> </div> <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4"> <h2 class="text-white text-lg font-semibold">Trending Posts</h2> <div class="flex flex-col space-y-4 mt-2"> <div class="flex space-x-2"> <img src="https://picsum.photos/50/50" alt="Post Image" class="rounded-lg"> <div> <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <span class="text-gray-500 text-sm">3 hours ago</span> </div> </div> <div class="flex space-x-2"> <img src="https://picsum.photos/50/50?random=1" alt="Post Image" class="rounded-lg"> <div> <p class="text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <span class="text-gray-500 text-sm">5 hours ago</span> </div> </div> </div> </div>\n<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4"> <h2 class="text-white text-lg font-semibold">Explore More</h2> <ul class="mt-2 space-y-1"> <li><a href="#" class="text-gray-300 hover:text-white">#Nature</a></li> <li><a href="#" class="text-gray-300 hover:text-white">#Travel</a></li> <li><a href="#" class="text-gray-300 hover:text-white">#Food</a></li> <li><a href="#" class="text-gray-300 hover:text-white">#Technology</a></li> <li><a href="#" class="text-gray-300 hover:text-white">#Lifestyle</a></li> </ul> </div>
Material Design 仪表板导航组件,具有三元配色方案和深色模式支持。
一个复杂的响应式导航组件,适用于社交媒体应用程序,具有等宽/开发人员的美感,具有柔和的颜色和深色模式支持。包括用户配置文件、搜索、通知和主导航链接。
一个复杂的响应式单色电子商务导航组件,其灵感来自 Material Design,具有搜索、购物车、用户资料和类别链接,并支持深色模式。