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 SaaS 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 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-rose-500 uppercase tracking-[0.4em] leading-relaxed drop-shadow-sm flex items-center justify-center gap-4"> <span>Trusted by 20k+ companies</span> <span class="relative flex h-3 w-3"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-3 w-3 bg-rose-500"></span> </span> </div> <h1 class="text-6xl md:text-9xl font-black text-slate-900 leading-none mb-10 tracking-tighter italic shadow-slate-200 drop-shadow-2xl">SAAS. <span class="text-indigo-600">HUB.</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">Automate your entire digital operation with AI-driven analytics and cloud-native infrastructure.</p> <div class="flex flex-col sm:flex-row gap-6 justify-center mb-24"> <button class="bg-indigo-600 text-white px-12 h-18 rounded-[2rem] font-black text-sm uppercase tracking-widest shadow-2xl hover:bg-slate-900 transition active:scale-95">Launch Dashboard</button> <button class="bg-white text-slate-400 border border-slate-200 px-12 h-18 rounded-[2rem] font-black text-sm uppercase tracking-widest hover:text-slate-900 transition active:scale-95">Compare Features</button> </div> <!-- SaaS Console Mockup --> <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 bg-white/40 backdrop-blur-3xl rounded-[4rem] shadow-3xl border border-white/60 p-12 transition-transform hover:-translate-y-4 duration-700"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-8"> <div class="h-40 bg-indigo-50/50 rounded-3xl border border-indigo-100 p-6 flex items-center justify-center text-indigo-400 italic">Traffic...</div> <div class="h-40 bg-indigo-50/50 rounded-3xl border border-indigo-100 p-6 flex items-center justify-center text-indigo-400 italic">Revenue...</div> <div class="h-40 bg-indigo-50/50 rounded-3xl border border-indigo-100 p-6 flex items-center justify-center text-indigo-400 italic">Nodes...</div> <div class="h-40 bg-indigo-50/50 rounded-3xl border border-indigo-100 p-6 flex items-center justify-center text-indigo-400 italic">Security...</div> </div> </div> </div> </div> </section> </body> </html>
