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 Newsletter Signup Form</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-white flex items-center justify-center min-h-screen p-6 antialiased"> <section class="w-full max-w-5xl bg-slate-900 rounded-[3.5rem] p-12 lg:p-24 relative overflow-hidden shadow-3xl"> <!-- Kinetic Decor --> <div class="absolute -top-24 -left-24 h-64 w-64 bg-rose-500 rounded-full blur-[100px] opacity-20 animate-pulse"></div> <div class="absolute -bottom-24 -right-24 h-64 w-64 bg-indigo-500 rounded-full blur-[100px] opacity-20 animate-pulse delay-700"></div> <div class="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div> <h2 class="text-4xl lg:text-5xl font-black text-white tracking-tighter mb-6 italic leading-none">Stay <span class="text-rose-500 underline decoration-rose-500/20 underline-offset-10">Optimized.</span></h2> <p class="text-xl text-indigo-100/60 font-bold leading-relaxed italic">The weekly brief for high-performance digital architects. Zero noise, ultimate signal.</p> </div> <div class="w-full"> <form class="flex flex-col sm:flex-row gap-4"> <div class="flex-1"> <input type="email" placeholder="enter@email.com" class="w-full h-18 bg-white/10 border-2 border-white/20 rounded-[2rem] px-8 font-black text-white text-sm placeholder-white/30 focus:outline-none focus:border-rose-500 focus:bg-white/20 transition-all uppercase tracking-widest"> </div> <button type="submit" class="px-10 h-18 bg-white text-slate-900 rounded-[2rem] font-black text-xs uppercase tracking-[0.2em] shadow-2xl hover:bg-rose-500 hover:text-white transition-all active:scale-95 cursor-pointer whitespace-nowrap"> Subscribe </button> </form> <p class="mt-6 text-[10px] font-black text-indigo-100/30 uppercase tracking-[0.3em] ml-4">Secured with military-grade encryption.</p> </div> </div> </section> </body> </html>
