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 Testimonial Grid</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center min-h-screen pt-16 p-6 antialiased"> <div class="max-w-7xl mx-auto space-y-16"> <div class="text-center space-y-4"> <h2 class="text-4xl font-black text-slate-900 tracking-tighter">Voices from the Mesh.</h2> <p class="max-w-2xl mx-auto text-lg text-slate-500 font-medium">Over 2,000 teams trust our synchronization protocols to power their global neural networks.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-start"> <!-- Card 1 --> <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/50 flex flex-col items-start gap-6"> <div class="flex gap-1"> <template x-for="i in 5"> <svg class="h-3.5 w-3.5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg> </template> </div> <p class="text-slate-600 font-medium leading-relaxed">"It completely changed how we synchronize our multi-cluster deployments across the Atlantic. Latency is virtually 0ms."</p> <div class="flex items-center gap-3 pt-4 border-t border-slate-50 w-full"> <div class="h-10 w-10 rounded-full bg-slate-100 overflow-hidden ring-2 ring-indigo-50"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop" class="h-full w-full object-cover"> </div> <div> <h4 class="text-xs font-bold text-slate-800">Sarah Jenkins</h4> <span class="text-[10px] text-slate-400 font-medium uppercase tracking-widest">Engineering Lead</span> </div> </div> </div> <!-- Card 2 (Featured) --> <div class="bg-slate-900 p-10 rounded-[2.5rem] shadow-2xl shadow-indigo-900/30 flex flex-col items-start gap-8 border border-white/5 relative overflow-hidden group"> <div class="absolute inset-0 bg-linear-to-br from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div> <div class="h-10 w-10 bg-indigo-500/20 text-indigo-400 rounded-xl flex items-center justify-center relative"> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017V14H17.017C15.3601 14 14.017 12.6569 14.017 11V8H20.017V14H22.017V21H14.017ZM2.01697 21L2.01697 18C2.01697 16.8954 2.91241 16 4.01697 16H7.01697V14H5.01697C3.36012 14 2.01697 12.6569 2.01697 11V8H8.01697V14H10.0169V21H2.01697Z" /></svg> </div> <p class="text-white text-lg font-medium leading-relaxed relative">"We deployed this across our entire fleet of 5,000 edge nodes. The atomicity and manifest verification are perfect."</p> <div class="flex items-center gap-4 pt-6 border-t border-white/10 w-full relative"> <div class="h-12 w-12 rounded-full ring-2 ring-indigo-500/30 overflow-hidden shadow-xl"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&h=120&fit=crop" class="h-full w-full object-cover"> </div> <div> <h4 class="text-sm font-bold text-white">James Sterling</h4> <span class="text-[10px] text-indigo-400 font-bold uppercase tracking-[0.2em]">CTO, Vangaurd Logic</span> </div> </div> </div> <!-- Card 3 --> <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/50 flex flex-col items-start gap-6"> <p class="text-slate-600 font-medium leading-relaxed">"The transition to v4 protocols was seamless. We synchronized our entire manifest sequence in under 12 minutes."</p> <div class="flex items-center gap-3 pt-4 border-t border-slate-50 w-full"> <div class="h-10 w-10 rounded-full bg-slate-100 overflow-hidden ring-2 ring-indigo-50"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" class="h-full w-full object-cover"> </div> <div> <h4 class="text-xs font-bold text-slate-800">Jessica Miller</h4> <span class="text-[10px] text-slate-400 font-medium uppercase tracking-widest">Protocol Architect</span> </div> </div> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
