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 Dark Mode Toggle</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </head> <body class="bg-gray-50 flex justify-center items-center min-h-screen p-6 antialiased" x-data="{ darkMode: false }" :class="darkMode ? 'bg-slate-950 transition-colors duration-700' : 'bg-gray-50 transition-colors duration-700'"> <div class="flex flex-col items-center gap-12"> <div class="text-center space-y-2"> <h2 class="text-2xl font-black tracking-tight" :class="darkMode ? 'text-white' : 'text-slate-900'">Spectral Mode Switch</h2> <p class="text-[10px] font-black uppercase tracking-[0.4em]" :class="darkMode ? 'text-indigo-400' : 'text-slate-400'">Solar / Void Protocol</p> </div> <!-- Toggle Button --> <button @click="darkMode = !darkMode" class="relative h-12 w-24 bg-slate-200 rounded-full p-1 transition-colors duration-500 cursor-pointer" :class="darkMode ? 'bg-indigo-600' : 'bg-slate-200'"> <div class="absolute inset-1 flex items-center justify-between px-2 text-slate-400 pointer-events-none"> <svg class="h-4 w-4" 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.465 5.05l-.708-.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 class="h-4 w-4" 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> </div> <div class="h-10 w-10 bg-white rounded-full shadow-lg transition-transform duration-500" :class="darkMode ? 'translate-x-12' : 'translate-x-0'"></div> </button> <!-- Info Card --> <div class="p-10 rounded-[3rem] border shadow-sm transition-all duration-700" :class="darkMode ? 'bg-slate-900 border-slate-800 text-slate-400' : 'bg-white border-slate-100 text-slate-500'"> <p class="max-w-xs leading-relaxed">Adjusting spectral visibility for low-light environments. Protocol adjustments applied globally across all mirror clusters.</p> </div> </div> </body> </html>
