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 App Landing Hero Section</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex min-h-screen px-4 py-20"> <section class="max-w-7xl mx-auto flex flex-col items-center justify-center text-center p-8 md:p-24 overflow-hidden relative"> <!-- Visual Gradient Decor --> <div class="absolute inset-0 bg-radial-at-t-l from-indigo-50/50 via-white to-rose-50/50 opacity-60"></div> <div class="relative z-10 max-w-4xl px-8"> <div class="mb-10 text-xs font-black text-slate-400 uppercase tracking-[0.4em] leading-relaxed drop-shadow-sm">Mobile First. Always.</div> <h1 class="text-6xl md:text-9xl font-black text-slate-900 leading-none mb-10 tracking-tighter">Your Hub <span class="italic text-rose-500 drop-shadow-2xl">Simplified.</span></h1> <p class="text-xl md:text-2xl text-slate-500 mb-16 leading-relaxed font-bold italic underline decoration-slate-100 decoration-8 underline-offset-10 max-w-2xl mx-auto">Everything you need to build high-performance digital infrastructure from the ground up.</p> <div class="flex flex-col sm:flex-row gap-6 justify-center mb-24"> <!-- App Store Buttons --> <button class="bg-slate-900 text-white px-10 h-18 rounded-[2rem] font-black text-sm uppercase tracking-widest shadow-2xl hover:bg-rose-600 transition active:scale-95 flex items-center gap-4"> <svg class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24"><path d="M17.523 15.341c-.551 0-1.002.446-1.002.992 0 .547.45.993 1.002.993.551 0 1.002-.446 1.002-.993 0-.546-.451-.992-1.002-.992zm3.307-3.64c-.552 0-1.002.446-1.002.992 0 .546.45.992 1.002.992s1.002-.446 1.002-.992c0-.546-.451-.992-1.002-.992zm-6.614 0c-.551 0-1.002.446-1.002.992 0 .546.45.992 1.002.992s1.002-.446 1.002-.992c0-.546-.451-.992-1.002-.992zm3.307-3.641c-.551 0-1.002.446-1.002.992 0 .546.45.993 1.002.993.551 0 1.002-.447 1.002-.993 0-.546-.451-.992-1.002-.992z"/><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm6.614 11.231c-1.373 0-2.486-1.113-2.486-2.486 0-1.373 1.113-2.486 2.486-2.486 1.373 0 2.486 1.113 2.486 2.486 0 1.373-1.113 2.486-2.486 2.486zm-3.307-3.641c-1.373 0-2.486-1.113-2.486-2.486 0-1.373 1.113-2.486 2.486-2.486 1.373 0 2.486 1.113 2.486 2.486 0 1.373-1.113 2.486-2.486 2.486zm-3.307 3.641c-1.373 0-2.486-1.113-2.486-2.486 0-1.373 1.113-2.486 2.486-2.486 1.373 0 2.486 1.113 2.486 2.486 0 1.373-1.113 2.486-2.486 2.486z"/></svg> App Store </button> <button class="bg-white text-slate-400 border border-slate-200 px-10 h-18 rounded-[2rem] font-black text-sm uppercase tracking-widest hover:text-slate-900 transition active:scale-95 flex items-center gap-4"> Dashboard Access </button> </div> <!-- Phone Mockup Container (Abstract representation) --> <div class="relative group mt-10"> <div class="absolute -inset-10 bg-gradient-to-tr from-rose-500/20 to-indigo-600/20 blur-[100px] opacity-40"></div> <div class="relative h-[600px] w-80 bg-slate-900 rounded-[4rem] mx-auto shadow-3xl border-8 border-slate-800 p-8 flex flex-col transition-transform hover:-translate-y-4 duration-700"> <div class="h-10 w-32 bg-slate-800 rounded-full mx-auto mb-10"></div> <div class="flex-1 bg-white/5 rounded-[2rem] p-6 space-y-6"> <div class="h-6 w-full bg-indigo-500/20 rounded-full"></div> <div class="h-32 w-full bg-rose-500/10 rounded-3xl border border-rose-500/20 animate-pulse"></div> <div class="h-32 w-full bg-amber-500/10 rounded-3xl border border-amber-500/20 animate-pulse delay-200"></div> </div> </div> </div> </div> </section> </body> </html>
