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 Full Screen Section</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="antialiased"> <div class="h-screen w-full bg-slate-900 flex flex-col"> <!-- Viewport Height 1 --> <div class="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center relative flex-col text-center px-4 snap-start"> <h1 class="text-5xl md:text-7xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-cyan-400 tracking-tight mb-6">Full Screen Sections</h1> <p class="text-xl text-slate-400 max-w-2xl font-light">Using h-screen or min-h-screen to snap sections perfectly to the viewport height for immersive storytelling and landing pages.</p> <div class="absolute bottom-10 animate-bounce"> <svg class="w-8 h-8 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg> </div> </div> </div> </body> </html>
