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 Video Testimonial</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-950 flex justify-center min-h-screen pt-16 p-6 antialiased"> <div class="max-w-5xl w-full flex flex-col md:flex-row items-center gap-16"> <!-- Video Placement --> <div class="w-full md:w-1/2 relative group"> <!-- Gradient Ring --> <div class="absolute -inset-4 bg-linear-to-r from-indigo-500 via-purple-500 to-rose-500 rounded-[3rem] blur-3xl opacity-20 group-hover:opacity-40 transition-opacity"></div> <div class="relative aspect-video bg-slate-900 rounded-[2.5rem] overflow-hidden border border-white/10 shadow-4xl cursor-pointer"> <img src="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?w=800&h=450&fit=crop" class="h-full w-full object-cover opacity-60 group-hover:opacity-40 transition-opacity transform group-hover:scale-110 duration-700"> <!-- Play Button Overlay --> <div class="absolute inset-0 flex items-center justify-center"> <div class="h-20 w-20 bg-white/10 backdrop-blur-xl border border-white/20 rounded-full flex items-center justify-center text-white shadow-2xl group-hover:bg-indigo-600 transition-all group-hover:scale-125 group-hover:shadow-[0_0_50px_rgba(99,102,241,0.5)]"> <svg class="h-8 w-8 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg> </div> </div> <!-- Identity Label --> <div class="absolute bottom-6 left-6 px-4 py-2 bg-slate-900/80 backdrop-blur-md rounded-xl border border-white/10 flex items-center gap-3"> <div class="h-8 w-8 rounded-full overflow-hidden border border-white/20"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64&h=64&fit=crop" class="h-full w-full object-cover"> </div> <span class="text-[10px] font-bold text-white uppercase tracking-widest italic">A. Sterling @ Sector 4 Core Logic</span> </div> </div> </div> <!-- Text Side --> <div class="w-full md:w-1/2 space-y-8"> <div class="space-y-4"> <span class="text-[11px] font-black text-indigo-400 uppercase tracking-widest italic border-l-2 border-indigo-500 pl-4">Platform Verified</span> <h2 class="text-4xl lg:text-5xl font-black text-white tracking-tighter leading-none">The Future of <br/>Mesh Logic.</h2> </div> <p class="text-lg text-slate-400 font-medium leading-relaxed pr-12">"We deployed version 4 across our entire global fleet in a single cycle. The verification speeds are simply unprecedented."</p> <div class="flex items-center gap-6"> <div class="flex flex-col"> <h4 class="text-xl font-bold text-white tracking-tight">Alexander Sterling.</h4> <span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.3em]">Chief Architect</span> </div> <div class="h-8 w-px bg-slate-800"></div> <div class="flex items-center gap-2 opacity-60"> <div class="h-2 w-2 bg-emerald-500 rounded-full animate-pulse"></div> <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest italic leading-tight">Sync Established</span> </div> </div> </div> </div> </body> </html>
