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 Illustration</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"> <!-- Left: 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">ILLUSION.</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">Everything you need to build high-performance digital infrastructure from the ground up.</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">Explore Platform</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> <!-- Right: Illustration Placeholder (Using Abstract Shapes as a modern illustration) --> <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 Abstract Illustration --> <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 Illustration Object --> <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="grid grid-cols-2 gap-8 w-full"> <div class="h-32 bg-indigo-500/10 rounded-3xl border border-indigo-500/20 animate-bounce"></div> <div class="h-32 bg-rose-500/10 rounded-3xl border border-rose-500/20 animate-bounce delay-100"></div> <div class="h-32 bg-amber-500/10 rounded-3xl border border-amber-500/20 animate-bounce delay-200"></div> <div class="h-32 bg-emerald-500/10 rounded-3xl border border-emerald-500/20 animate-bounce delay-300"></div> </div> </div> </div> </div> </section> </body> </html>
