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 Testimonial</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">"Limitless."</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> <!-- Testimonial Block --> <blockquote class="p-10 md:p-14 bg-white/40 backdrop-blur-3xl rounded-[3rem] shadow-2xl border border-white/60 ring-1 ring-black/5 relative group cursor-pointer hover:bg-white/60 transition-all shadow-indigo-100"> <div class="h-14 w-14 bg-indigo-600 rounded-2xl flex items-center justify-center text-white mb-8 shadow-xl shadow-indigo-900/10 rotate-12 group-hover:rotate-0 transition-transform"> <svg class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017V14C19.017 11.2386 16.7784 9 14.017 9H13.017V6H14.017C18.4353 6 22.017 9.58172 22.017 14V18C22.017 19.6569 20.6739 21 19.017 21H14.017ZM5.01699 21L5.01699 18C5.01699 16.8954 5.91243 16 7.01699 16H10.017V14C10.017 11.2386 7.77841 9 5.01699 9H4.01699V6H5.01699C9.43527 6 13.017 9.58172 13.017 14V18C13.017 19.6569 11.6739 21 10.017 21H5.01699Z" /></svg> </div> <p class="text-xl font-bold text-slate-800 leading-relaxed mb-8 italic">"Building the foundation of our platform was 10x faster with this toolset. It's the only digital asset we truly trust for global impact."</p> <div class="flex items-center gap-5"> <img class="h-14 w-14 rounded-full border-4 border-white shadow-lg" src="https://i.pravatar.cc/100?u=testimonialuser" alt="User"> <div> <p class="text-xs font-black text-slate-800 uppercase tracking-widest leading-loose">Casey Rivers</p> <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest leading-loose">Lead Architect, Nexus</p> </div> </div> </blockquote> </div> <!-- Right: Visual Visual container (Simple abstract shape for demo) --> <div class="lg:w-1/2 relative hidden lg:flex items-center justify-center"> <div class="w-96 h-96 bg-gradient-to-tr from-rose-500 to-indigo-600 rounded-[5rem] shadow-[0_0_100px_rgba(255,100,100,0.4)] rotate-45 transform transition hover:rotate-90 duration-700 cursor-pointer"></div> <div class="absolute inset-0 flex items-center justify-center pointer-events-none"> <p class="text-[15rem] font-black text-indigo-50/20 italic rotate-12">NEXUS</p> </div> </div> </section> </body> </html>
