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 Product Hero Section</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-indigo-50 flex min-h-screen items-center justify-center font-sans tracking-tight"> <section class="max-w-7xl mx-auto w-full px-8 md:px-24 py-20 lg:py-48 flex flex-col lg:flex-row gap-16 lg:gap-32 items-center"> <!-- Content container --> <div class="lg:w-1/2 text-center lg:text-left"> <h1 class="text-6xl md:text-8xl font-black text-rose-500 leading-none mb-10 tracking-tighter italic shadow-rose-200 drop-shadow-2xl">SOLO GEAR.</h1> <p class="text-xl md:text-2xl text-slate-500 mb-16 leading-relaxed font-bold italic underline decoration-slate-200 decoration-8 underline-offset-10 max-w-lg">Engineered for performance. Designed for impact. The only platform built for full-scale digital mastery.</p> <div class="flex flex-col sm:flex-row gap-4"> <button class="bg-indigo-600 text-white px-10 h-16 rounded-2xl font-black text-sm uppercase tracking-widest shadow-2xl shadow-indigo-100 hover:bg-slate-900 transition active:scale-95">Shop Collection</button> <button class="bg-white text-slate-400 border border-slate-200 px-10 h-16 rounded-2xl font-black text-sm uppercase tracking-widest hover:text-slate-900 transition active:scale-95">Docs Overview</button> </div> </div> <!-- Product Visual Placeholder (A focal shape to represent the product) --> <div class="lg:w-1/2 relative flex items-center justify-center p-12"> <div class="relative w-full aspect-square max-w-lg"> <!-- Background Glow effects --> <div class="absolute inset-0 bg-indigo-200 rounded-full blur-[100px] opacity-40"></div> <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[80%] bg-gradient-to-tr from-rose-500/20 to-indigo-600/20 rounded-[10rem] rotate-12 animate-pulse"></div> <!-- Focal Object representing a premium product --> <div class="relative w-full h-full bg-white/40 backdrop-blur-3xl rounded-[4rem] shadow-2xl border border-white/60 p-12 flex items-center justify-center rotate-3 hover:translate-x-4 transition-transform duration-700 cursor-pointer"> <div class="h-64 w-64 bg-slate-900 rounded-[3rem] shadow-2xl border border-slate-700 flex flex-col items-center justify-center text-white relative"> <div class="text-xs font-black uppercase tracking-widest opacity-40 mb-2">Series 04</div> <div class="text-6xl font-black italic shadow-indigo-500 drop-shadow-2xl">SOLO.</div> <div class="absolute bottom-5 right-5 h-12 w-12 bg-rose-500 rounded-full flex items-center justify-center font-black group-hover:scale-125 transition-transform">+</div> </div> </div> </div> </div> </section> </body> </html>
