一个为暗黑模式设计的粘性导航组件,使用 Tailwind CSS 具有响应式效果。
<header class="bg-gray-900 text-white shadow sticky top-0 z-50"> <div class="container mx-auto p-4 flex justify-between items-center"> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" /> <h1 class="text-xl font-semibold">My Website</h1> </div> <nav class="hidden md:flex space-x-4"> <a href="#" class="hover:text-gray-400">Home</a> <a href="#" class="hover:text-gray-400">About</a> <a href="#" class="hover:text-gray-400">Services</a> <a href="#" class="hover:text-gray-400">Contact</a> </nav> <div class="md:hidden"> <button class="text-gray-400 hover:text-gray-500 focus:outline-none"> <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> </header> <main class="bg-gray-800 text-white min-h-screen p-4"> <section> <h2 class="text-2xl font-bold mb-4">Welcome to My Website</h2> <p>Here is some content!</p> <img src="https://picsum.photos/800/300" alt="Placeholder" class="mt-4 rounded-lg shadow-lg" /> </section> </main> <footer class="bg-gray-900 text-gray-400 text-center p-4"> <p>© 2023 My Website</p> </footer>
一个按照拟物风格设计的固定导航组件,适用于电子商务网站,使用Tailwind CSS,具有响应式设计和深色主题支持。
一个适用于电子商务的暗模式粘性导航组件,采用互补色搭配和基本布局.
一个响应式粘性导航组件,采用Neumorphism设计,互补色彩方案和深色主题支持,适合个人作品网站。使用Tailwind CSS并结合深色模式类,并包括细微的阴影以达到Neumorphism效果。