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 Carousel</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" x-data="{ active: 0, testimonials: [ { quote: 'The synchronization speed between nodes is fantastic. We have never seen such low latency in our cluster architecture.', author: 'Alexander Sterling', role: 'Architect', avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop' }, { quote: 'We switched from a traditional model to this mesh protocol and the results were immediate. Latency dropped by 45%.', author: 'Sarah Jenkins', role: 'Lead Engineer', avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop' }, { quote: 'Managing 12,000 edge nodes is now simple. The centralized manifest verification is the key.', author: 'James Miller', role: 'Infrastructure VP', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop' } ]}"> <div class="max-w-3xl w-full bg-white p-16 rounded-[4rem] shadow-4xl border border-white relative overflow-hidden group"> <!-- Slider --> <div class="relative min-h-[16rem]"> <template x-for="(testimonial, index) in testimonials" :key="index"> <div x-show="active === index" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-x-12" x-transition:enter-end="opacity-100 translate-x-0" x-transition:leave="transition ease-in duration-300 absolute inset-0" x-transition:leave-start="opacity-100 translate-x-0" x-transition:leave-end="opacity-0 -translate-x-12" class="flex flex-col items-center text-center space-y-8" > <div class="h-20 w-20 rounded-full ring-8 ring-indigo-50 shadow-2xl overflow-hidden"> <img :src="testimonial.avatar" class="h-full w-full object-cover"> </div> <p class="text-2xl font-medium text-slate-800 tracking-tight leading-relaxed italic" x-text="'“' + testimonial.quote + '”'"></p> <div class="space-y-1"> <h4 class="text-base font-bold text-slate-900" x-text="testimonial.author"></h4> <span class="text-[11px] font-semibold text-slate-400 uppercase tracking-widest" x-text="testimonial.role"></span> </div> </div> </template> </div> <!-- Controls --> <div class="flex items-center justify-between mt-12 px-8"> <button @click="active = (active - 1 + testimonials.length) % testimonials.length" class="h-12 w-12 rounded-full border border-slate-100 flex items-center justify-center text-slate-300 hover:text-indigo-600 hover:border-indigo-100 hover:bg-slate-50 transition-all cursor-pointer group" > <svg class="h-5 w-5 group-hover:-translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" /></svg> </button> <div class="flex gap-2"> <template x-for="(testimonial, index) in testimonials" :key="index"> <button @click="active = index" class="h-1.5 rounded-full transition-all duration-300" :class="active === index ? 'w-8 bg-indigo-600 shadow-lg shadow-indigo-100' : 'w-2 bg-slate-200 hover:bg-slate-300'" ></button> </template> </div> <button @click="active = (active + 1) % testimonials.length" class="h-12 w-12 rounded-full border border-slate-100 flex items-center justify-center text-slate-300 hover:text-indigo-600 hover:border-indigo-100 hover:bg-slate-50 transition-all cursor-pointer group" > <svg class="h-5 w-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg> </button> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
