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 Hero With Signup Form</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 md:px-0"> <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-2xl px-8"> <div class="mb-10 text-xs font-black text-slate-400 uppercase tracking-[0.4em] leading-relaxed drop-shadow-sm">Direct Access.</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">Stop navigating, start building. Join over 20,000 developers who have streamlined their daily workflow.</p> <!-- Signup Form Container --> <form class="p-4 md:p-6 bg-white/20 backdrop-blur-3xl rounded-[3rem] shadow-2xl border border-white/40 ring-1 ring-black/5 flex flex-col md:flex-row gap-4 max-w-2xl mx-auto shadow-indigo-100 transition-all hover:bg-white/40 group"> <div class="flex-1 px-8 py-5 h-16 bg-white rounded-[2rem] border-2 border-slate-100 shadow-sm transition group-hover:border-indigo-200"> <input type="email" placeholder="you@work.com" class="w-full h-full bg-transparent text-sm font-bold text-slate-900 placeholder-slate-400 focus:outline-none"> </div> <button type="submit" class="px-10 h-16 bg-slate-900 text-white rounded-[2rem] font-black text-sm uppercase tracking-widest hover:bg-rose-600 transition shadow-xl active:scale-95 whitespace-nowrap">Join Now</button> </form> <p class="mt-8 text-xs font-bold text-slate-400 uppercase tracking-widest italic flex items-center justify-center gap-3"> <svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg> No credit card required. Free forever plans. </p> </div> </section> </body> </html>
