一个响应式导航组件,具有微交互和黑暗主题支持,采用 Tailwind CSS 设计。
<nav class="bg-white dark:bg-gray-800 shadow-lg"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <div class="flex-shrink-0"> <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" /> </div> <div class="hidden md:block"> <div class="flex space-x-4"> <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out"> Home </a> <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out"> About </a> <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out"> Services </a> <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out"> Contact </a> </div> </div> <div class="-mr-2 flex md:hidden"> <button class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> <span class="sr-only">Open main menu</span> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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> <div class="md:hidden"> <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out"> Home </a> <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out"> About </a> <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out"> Services </a> <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out"> Contact </a> </div> </div> </nav>
一个响应式导航组件,采用粗野派风格设计,展示单色配色方案,非常适合投资组合网站。功能包括具有高对比度的粗体布局、使用 Tailwind CSS 的深色模式支持以及下拉列表或按钮链接等交互式元素。
一个响应式导航组件,设计了微交互,具有基于用户操作的引人入胜的动画,支持明亮和黑暗主题。该组件包括个人头像、导航链接和悬停效果。
一个用于作品集网站的响应式导航组件,其灵感来自具有日落/暖色调的纸张/印刷美学。包括深色模式支持和适合展示作品的简洁布局。