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 Sticky Header</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="antialiased"> <div class="h-screen overflow-y-auto bg-slate-50 dark:bg-slate-900"> <header class="sticky top-0 z-50 bg-white/80 dark:bg-slate-800/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-700 shadow-sm"> <div class="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between"> <h1 class="font-bold text-xl text-indigo-600 dark:text-indigo-400">Sticky Header</h1> <nav class="space-x-4"> <a href="#" class="text-slate-600 hover:text-indigo-600 dark:text-slate-300 dark:hover:text-indigo-400 font-medium">Home</a> <a href="#" class="text-slate-600 hover:text-indigo-600 dark:text-slate-300 dark:hover:text-indigo-400 font-medium">About</a> </nav> </div> </header> <main class="max-w-4xl mx-auto px-4 py-8 space-y-8"> <div class="h-64 rounded-xl bg-slate-200 dark:bg-slate-800 p-8 flex items-center justify-center"> <p class="text-slate-500 dark:text-slate-400">Scroll down to see the header stick to the top.</p> </div> <div class="h-64 rounded-xl bg-slate-200 dark:bg-slate-800"></div> <div class="h-64 rounded-xl bg-slate-200 dark:bg-slate-800"></div> <div class="h-64 rounded-xl bg-slate-200 dark:bg-slate-800"></div> </main> </div> </body> </html>
