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 Card</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-md w-full"> <div class="bg-white p-10 rounded-[2.5rem] shadow-xl shadow-slate-200/50 border border-slate-100 relative overflow-hidden group hover:border-indigo-100 transition-colors"> <!-- Quote Icon --> <div class="absolute -top-4 -right-4 h-24 w-24 text-indigo-50/50 group-hover:text-indigo-100/50 transition-colors transform rotate-12"> <svg 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> <div class="relative space-y-8"> <!-- Rating --> <div class="flex gap-1"> <template x-for="i in 5"> <svg class="h-4 w-4 text-amber-400" 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> <!-- Quote Content --> <p class="text-lg text-slate-700 font-medium leading-relaxed"> "The level of synchronization achieved with this protocol is unmatched. We've seen a <span class="text-indigo-600 font-bold">40% reduction in latency</span> across our global nodes within the first week." </p> <!-- User Info --> <div class="flex items-center gap-4 pt-6 border-t border-slate-50"> <div class="h-12 w-12 rounded-full ring-2 ring-indigo-50 overflow-hidden shadow-md"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" class="h-full w-full object-cover"> </div> <div> <h4 class="text-sm font-bold text-slate-900">Alexander Sterling</h4> <span class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Cloud Systems 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>
