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 Gradient Background</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 antialiased"> <section class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-rose-900 flex items-center justify-center p-8 text-center relative overflow-hidden"> <!-- Animated Background Blobs --> <div class="absolute -top-32 -left-32 w-96 h-96 bg-indigo-500/20 rounded-full mix-blend-screen filter blur-3xl animate-pulse"></div> <div class="absolute top-1/2 -right-32 w-80 h-80 bg-rose-500/20 rounded-full mix-blend-screen filter blur-3xl animate-pulse delay-500"></div> <div class="relative z-10 max-w-4xl"> <h1 class="text-6xl md:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white via-indigo-200 to-rose-200 leading-tight mb-8 tracking-tighter shadow-sm">Unlimited Vision.</h1> <p class="text-xl text-indigo-100/70 max-w-2xl mx-auto mb-16 leading-relaxed font-bold italic underline decoration-indigo-400/30 decoration-8 underline-offset-12">Building the future of digital experience with core performance at heart.</p> <div class="flex flex-col sm:flex-row items-center justify-center gap-6"> <button class="w-full sm:w-auto px-12 py-5 bg-white text-indigo-900 rounded-3xl font-black text-sm uppercase tracking-widest shadow-2xl hover:bg-indigo-50 transition active:scale-95">Deploy Solution</button> <button class="w-full sm:w-auto px-12 py-5 bg-indigo-500/10 backdrop-blur-md text-white border border-indigo-400/20 rounded-3xl font-black text-sm uppercase tracking-widest hover:bg-indigo-500/20 transition">Learn More</button> </div> </div> </section> </body> </html>
