Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Navbar With Dark Mode Toggle</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body x-data="{ darkMode: false }" :class="darkMode ? 'bg-slate-900 border-slate-800' : 'bg-white border-gray-200'" class="transition-colors duration-300"> <nav :class="darkMode ? 'bg-slate-800 text-white' : 'bg-white text-gray-800'" class="border-b px-6 h-16 flex items-center justify-between transition-colors shadow-sm"> <div class="font-black text-xl italic tracking-tight">SOLARIS</div> <div class="flex items-center space-x-8"> <div class="hidden md:flex space-x-6 text-sm font-bold uppercase"> <a href="##">Overview</a> <a href="##">Docs</a> <a href="##">API</a> </div> <!-- Dark Mode Switcher --> <button @click="darkMode = !darkMode" class="relative w-14 h-8 flex items-center rounded-full p-1 cursor-pointer transition-colors duration-300 focus:outline-none" :class="darkMode ? 'bg-indigo-600' : 'bg-gray-200'" > <span class="bg-white w-6 h-6 rounded-full shadow-md transform transition-transform duration-300 flex items-center justify-center overflow-hidden" :class="darkMode ? 'translate-x-6' : 'translate-x-0'" > <svg x-show="!darkMode" class="h-4 w-4 text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg> <svg x-show="darkMode" class="h-4 w-4 text-indigo-900" style="display: none;" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg> </span> </button> <!-- Mobile Button Placeholder --> <button class="md:hidden"> <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> </nav> <main class="max-w-4xl mx-auto mt-20 p-10 text-center"> <h1 :class="darkMode ? 'text-white' : 'text-gray-900'" class="text-5xl font-black mb-6">Welcome to the Light Side?</h1> <p :class="darkMode ? 'text-slate-400' : 'text-gray-500'" class="text-xl">Toggle the switch in the navbar to see the page colors update in real time using Tailwind CSS and Alpine.js.</p> </main> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
