Testimonial Components
Beautiful testimonial components built with TailwindCSS. Perfect for displaying customer testimonials, reviews, and social proof.
1. Simple Testimonial Card
Clean and minimal testimonial card with quote, author, and role.
"This product has completely transformed our workflow. The ease of use and powerful features make it a must-have for any team."
Sarah Johnson
Product Manager, TechCorp
<!-- Simple Testimonial Card -->
<div class="max-w-md mx-auto">
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="text-center">
<svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-10z"/>
</svg>
<blockquote class="text-gray-700 mb-4 italic">
"This product has completely transformed our workflow. The ease of use and powerful features make it a must-have for any team."
</blockquote>
<div class="flex items-center justify-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=64&h=64&fit=crop&crop=face" alt="Sarah Johnson">
<div>
<cite class="font-semibold text-gray-900">Sarah Johnson</cite>
<p class="text-sm text-gray-600">Product Manager, TechCorp</p>
</div>
</div>
</div>
</div>
</div><template>
<!-- Simple Testimonial Card -->
<div class="max-w-md mx-auto">
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="text-center">
<svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-10z"/>
</svg>
<blockquote class="text-gray-700 mb-4 italic">
"This product has completely transformed our workflow. The ease of use and powerful features make it a must-have for any team."
</blockquote>
<div class="flex items-center justify-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=64&h=64&fit=crop&crop=face" alt="Sarah Johnson">
<div>
<cite class="font-semibold text-gray-900">Sarah Johnson</cite>
<p class="text-sm text-gray-600">Product Manager, TechCorp</p>
</div>
</div>
</div>
</div>
</div>
</template>export default function SimpleTestimonialCard() {
return (
<div className="max-w-md mx-auto">
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="text-center">
<svg className="w-12 h-12 text-gray-400 mx-auto mb-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-10z"/>
</svg>
<blockquote className="text-gray-700 mb-4 italic">
"This product has completely transformed our workflow. The ease of use and powerful features make it a must-have for any team."
</blockquote>
<div className="flex items-center justify-center">
<img className="w-10 h-10 rounded-full mr-3" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=64&h=64&fit=crop&crop=face" alt="Sarah Johnson" />
<div>
<cite className="font-semibold text-gray-900">Sarah Johnson</cite>
<p className="text-sm text-gray-600">Product Manager, TechCorp</p>
</div>
</div>
</div>
</div>
</div>
);
}2. Testimonial Grid
Responsive grid layout displaying multiple testimonials with consistent styling.
John Doe
CEO, StartupXYZ
"Outstanding service and support. Highly recommend to anyone looking for quality solutions."
Jane Smith
Designer, CreativeCo
"The design quality is exceptional. It perfectly captures our brand vision."
Mike Johnson
Developer, TechHub
"Incredible performance and reliability. Our users love the new features."
<!-- Testimonial Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
<!-- Testimonial 1 -->
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=48&h=48&fit=crop&crop=face" alt="John Doe">
<div>
<h4 class="font-semibold text-gray-900">John Doe</h4>
<p class="text-sm text-gray-600">CEO, StartupXYZ</p>
</div>
</div>
<p class="text-gray-700 italic">"Outstanding service and support. Highly recommend to anyone looking for quality solutions."</p>
</div>
<!-- Testimonial 2 -->
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=48&h=48&fit=crop&crop=face" alt="Jane Smith">
<div>
<h4 class="font-semibold text-gray-900">Jane Smith</h4>
<p class="text-sm text-gray-600">Designer, CreativeCo</p>
</div>
</div>
<p class="text-gray-700 italic">"The design quality is exceptional. It perfectly captures our brand vision."</p>
</div>
<!-- Testimonial 3 -->
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=48&h=48&fit=crop&crop=face" alt="Mike Johnson">
<div>
<h4 class="font-semibold text-gray-900">Mike Johnson</h4>
<p class="text-sm text-gray-600">Developer, TechHub</p>
</div>
</div>
<p class="text-gray-700 italic">"Incredible performance and reliability. Our users love the new features."</p>
</div>
</div><template>
<!-- Testimonial Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
<!-- Testimonial 1 -->
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=48&h=48&fit=crop&crop=face" alt="John Doe">
<div>
<h4 class="font-semibold text-gray-900">John Doe</h4>
<p class="text-sm text-gray-600">CEO, StartupXYZ</p>
</div>
</div>
<p class="text-gray-700 italic">"Outstanding service and support. Highly recommend to anyone looking for quality solutions."</p>
</div>
<!-- Testimonial 2 -->
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=48&h=48&fit=crop&crop=face" alt="Jane Smith">
<div>
<h4 class="font-semibold text-gray-900">Jane Smith</h4>
<p class="text-sm text-gray-600">Designer, CreativeCo</p>
</div>
</div>
<p class="text-gray-700 italic">"The design quality is exceptional. It perfectly captures our brand vision."</p>
</div>
<!-- Testimonial 3 -->
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=48&h=48&fit=crop&crop=face" alt="Mike Johnson">
<div>
<h4 class="font-semibold text-gray-900">Mike Johnson</h4>
<p class="text-sm text-gray-600">Developer, TechHub</p>
</div>
</div>
<p class="text-gray-700 italic">"Incredible performance and reliability. Our users love the new features."</p>
</div>
</div>
</template>export default function TestimonialGrid() {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
<!-- Testimonial 1 -->
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<img className="w-12 h-12 rounded-full mr-4" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=48&h=48&fit=crop&crop=face" alt="John Doe" />
<div>
<h4 className="font-semibold text-gray-900">John Doe</h4>
<p className="text-sm text-gray-600">CEO, StartupXYZ</p>
</div>
</div>
<p className="text-gray-700 italic">"Outstanding service and support. Highly recommend to anyone looking for quality solutions."</p>
</div>
<!-- Testimonial 2 -->
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<img className="w-12 h-12 rounded-full mr-4" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=48&h=48&fit=crop&crop=face" alt="Jane Smith" />
<div>
<h4 className="font-semibold text-gray-900">Jane Smith</h4>
<p className="text-sm text-gray-600">Designer, CreativeCo</p>
</div>
</div>
<p className="text-gray-700 italic">"The design quality is exceptional. It perfectly captures our brand vision."</p>
</div>
<!-- Testimonial 3 -->
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<img className="w-12 h-12 rounded-full mr-4" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=48&h=48&fit=crop&crop=face" alt="Mike Johnson" />
<div>
<h4 className="font-semibold text-gray-900">Mike Johnson</h4>
<p className="text-sm text-gray-600">Developer, TechHub</p>
</div>
</div>
<p className="text-gray-700 italic">"Incredible performance and reliability. Our users love the new features."</p>
</div>
</div>
);
}3. Testimonial Carousel
Interactive carousel displaying testimonials with navigation controls and smooth transitions.
"This has been a game-changer for our team. The productivity boost is incredible."Sarah Wilson
Marketing Director, InnovateCorp
"Exceptional quality and customer service. Would recommend to any business."David Chen
CTO, TechSolutions
"The best investment we've made this year. Results speak for themselves."Emma Rodriguez
CEO, GrowthLabs
<!-- Testimonial Carousel -->
<div x-data="{ currentSlide: 0 }" class="max-w-2xl mx-auto">
<div class="relative overflow-hidden">
<div class="flex transition-transform duration-500" :style="`transform: translateX(-${currentSlide * 100}%)`">
<!-- Slide 1 -->
<div class="w-full flex-shrink-0">
<div class="bg-white rounded-lg shadow-lg p-8 text-center">
<img class="w-16 h-16 rounded-full mx-auto mb-4" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=64&h=64&fit=crop&crop=face" alt="Sarah Wilson">
<blockquote class="text-gray-700 mb-4 italic text-lg">
"This has been a game-changer for our team. The productivity boost is incredible."
</blockquote>
<cite class="font-semibold text-gray-900">Sarah Wilson</cite>
<p class="text-sm text-gray-600">Marketing Director, InnovateCorp</p>
</div>
</div>
<!-- Slide 2 -->
<div class="w-full flex-shrink-0">
<div class="bg-white rounded-lg shadow-lg p-8 text-center">
<img class="w-16 h-16 rounded-full mx-auto mb-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=face" alt="David Chen">
<blockquote class="text-gray-700 mb-4 italic text-lg">
"Exceptional quality and customer service. Would recommend to any business."
</blockquote>
<cite class="font-semibold text-gray-900">David Chen</cite>
<p class="text-sm text-gray-600">CTO, TechSolutions</p>
</div>
</div>
<!-- Slide 3 -->
<div class="w-full flex-shrink-0">
<div class="bg-white rounded-lg shadow-lg p-8 text-center">
<img class="w-16 h-16 rounded-full mx-auto mb-4" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&h=64&fit=crop&crop=face" alt="Emma Rodriguez">
<blockquote class="text-gray-700 mb-4 italic text-lg">
"The best investment we've made this year. Results speak for themselves."
</blockquote>
<cite class="font-semibold text-gray-900">Emma Rodriguez</cite>
<p class="text-sm text-gray-600">CEO, GrowthLabs</p>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="flex justify-center mt-6 space-x-2">
<button @click="currentSlide = 0" :class="currentSlide === 0 ? 'bg-violet text-white' : 'bg-gray-300 text-gray-700'" class="w-3 h-3 rounded-full transition-colors"></button>
<button @click="currentSlide = 1" :class="currentSlide === 1 ? 'bg-violet text-white' : 'bg-gray-300 text-gray-700'" class="w-3 h-3 rounded-full transition-colors"></button>
<button @click="currentSlide = 2" :class="currentSlide === 2 ? 'bg-violet text-white' : 'bg-gray-300 text-gray-700'" class="w-3 h-3 rounded-full transition-colors"></button>
</div>
</div><template>
<!-- Testimonial Carousel -->
<div>
<div class="max-w-2xl mx-auto">
<div class="relative overflow-hidden">
<div class="flex transition-transform duration-500" :style="`transform: translateX(-${currentSlide * 100}%)`">
<!-- Slide 1 -->
<div class="w-full flex-shrink-0">
<div class="bg-white rounded-lg shadow-lg p-8 text-center">
<img class="w-16 h-16 rounded-full mx-auto mb-4" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=64&h=64&fit=crop&crop=face" alt="Sarah Wilson">
<blockquote class="text-gray-700 mb-4 italic text-lg">
"This has been a game-changer for our team. The productivity boost is incredible."
</blockquote>
<cite class="font-semibold text-gray-900">Sarah Wilson</cite>
<p class="text-sm text-gray-600">Marketing Director, InnovateCorp</p>
</div>
</div>
<!-- Slide 2 -->
<div class="w-full flex-shrink-0">
<div class="bg-white rounded-lg shadow-lg p-8 text-center">
<img class="w-16 h-16 rounded-full mx-auto mb-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=face" alt="David Chen">
<blockquote class="text-gray-700 mb-4 italic text-lg">
"Exceptional quality and customer service. Would recommend to any business."
</blockquote>
<cite class="font-semibold text-gray-900">David Chen</cite>
<p class="text-sm text-gray-600">CTO, TechSolutions</p>
</div>
</div>
<!-- Slide 3 -->
<div class="w-full flex-shrink-0">
<div class="bg-white rounded-lg shadow-lg p-8 text-center">
<img class="w-16 h-16 rounded-full mx-auto mb-4" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&h=64&fit=crop&crop=face" alt="Emma Rodriguez">
<blockquote class="text-gray-700 mb-4 italic text-lg">
"The best investment we've made this year. Results speak for themselves."
</blockquote>
<cite class="font-semibold text-gray-900">Emma Rodriguez</cite>
<p class="text-sm text-gray-600">CEO, GrowthLabs</p>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="flex justify-center mt-6 space-x-2">
<button @click="currentSlide = 0" :class="currentSlide === 0 ? 'bg-violet text-white' : 'bg-gray-300 text-gray-700'" class="w-3 h-3 rounded-full transition-colors"></button>
<button @click="currentSlide = 1" :class="currentSlide === 1 ? 'bg-violet text-white' : 'bg-gray-300 text-gray-700'" class="w-3 h-3 rounded-full transition-colors"></button>
<button @click="currentSlide = 2" :class="currentSlide === 2 ? 'bg-violet text-white' : 'bg-gray-300 text-gray-700'" class="w-3 h-3 rounded-full transition-colors"></button>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const currentSlide = ref(0)
</script>import React, { useState } from 'react'
export default function TestimonialCarousel() {
const [currentSlide, setCurrentSlide] = useState(0)
return (
<div className="max-w-2xl mx-auto">
<div className="relative overflow-hidden">
<div className="flex transition-transform duration-500" style= {{ transform: `translateX(-${currentSlide * 100}%)` }}>
<!-- Slide 1 -->
<div className="w-full flex-shrink-0">
<div className="bg-white rounded-lg shadow-lg p-8 text-center">
<img className="w-16 h-16 rounded-full mx-auto mb-4" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=64&h=64&fit=crop&crop=face" alt="Sarah Wilson" />
<blockquote className="text-gray-700 mb-4 italic text-lg">
"This has been a game-changer for our team. The productivity boost is incredible."
</blockquote>
<cite className="font-semibold text-gray-900">Sarah Wilson</cite>
<p className="text-sm text-gray-600">Marketing Director, InnovateCorp</p>
</div>
</div>
<!-- Slide 2 -->
<div className="w-full flex-shrink-0">
<div className="bg-white rounded-lg shadow-lg p-8 text-center">
<img className="w-16 h-16 rounded-full mx-auto mb-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=face" alt="David Chen" />
<blockquote className="text-gray-700 mb-4 italic text-lg">
"Exceptional quality and customer service. Would recommend to any business."
</blockquote>
<cite className="font-semibold text-gray-900">David Chen</cite>
<p className="text-sm text-gray-600">CTO, TechSolutions</p>
</div>
</div>
<!-- Slide 3 -->
<div className="w-full flex-shrink-0">
<div className="bg-white rounded-lg shadow-lg p-8 text-center">
<img className="w-16 h-16 rounded-full mx-auto mb-4" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&h=64&fit=crop&crop=face" alt="Emma Rodriguez" />
<blockquote className="text-gray-700 mb-4 italic text-lg">
"The best investment we've made this year. Results speak for themselves."
</blockquote>
<cite className="font-semibold text-gray-900">Emma Rodriguez</cite>
<p className="text-sm text-gray-600">CEO, GrowthLabs</p>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<div className="flex justify-center mt-6 space-x-2">
<button onClick={() => setCurrentSlide(0)} className={`w-3 h-3 rounded-full transition-colors ${currentSlide === 0 ? 'bg-violet text-white' : 'bg-gray-300 text-gray-700'}`}></button>
<button onClick={() => setCurrentSlide(1)} className={`w-3 h-3 rounded-full transition-colors ${currentSlide === 1 ? 'bg-violet text-white' : 'bg-gray-300 text-gray-700'}`}></button>
<button onClick={() => setCurrentSlide(2)} className={`w-3 h-3 rounded-full transition-colors ${currentSlide === 2 ? 'bg-violet text-white' : 'bg-gray-300 text-gray-700'}`}></button>
</div>
</div>
);
}4. Testimonial with Rating Stars
Testimonial card featuring customer ratings with star icons for enhanced credibility.
"Outstanding customer support and intuitive interface. Five stars all the way!"
Alex Thompson
Verified Customer
<!-- Testimonial with Rating Stars -->
<div class="max-w-lg mx-auto">
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="text-center">
<!-- Star Rating -->
<div class="flex justify-center mb-4">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
</div>
<blockquote class="text-gray-700 mb-4 italic">
"Outstanding customer support and intuitive interface. Five stars all the way!"
</blockquote>
<div class="flex items-center justify-center">
<img class="w-12 h-12 rounded-full mr-3" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=face" alt="Alex Thompson">
<div>
<cite class="font-semibold text-gray-900">Alex Thompson</cite>
<p class="text-sm text-gray-600">Verified Customer</p>
</div>
</div>
</div>
</div>
</div><template>
<!-- Testimonial with Rating Stars -->
<div class="max-w-lg mx-auto">
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="text-center">
<!-- Star Rating -->
<div class="flex justify-center mb-4">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
</div>
<blockquote class="text-gray-700 mb-4 italic">
"Outstanding customer support and intuitive interface. Five stars all the way!"
</blockquote>
<div class="flex items-center justify-center">
<img class="w-12 h-12 rounded-full mr-3" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=face" alt="Alex Thompson">
<div>
<cite class="font-semibold text-gray-900">Alex Thompson</cite>
<p class="text-sm text-gray-600">Verified Customer</p>
</div>
</div>
</div>
</div>
</div>
</template>export default function TestimonialWithRatingStars() {
return (
<div className="max-w-lg mx-auto">
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="text-center">
<!-- Star Rating -->
<div className="flex justify-center mb-4">
<svg className="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg className="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg className="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg className="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<svg className="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
</div>
<blockquote className="text-gray-700 mb-4 italic">
"Outstanding customer support and intuitive interface. Five stars all the way!"
</blockquote>
<div className="flex items-center justify-center">
<img className="w-12 h-12 rounded-full mr-3" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=face" alt="Alex Thompson" />
<div>
<cite className="font-semibold text-gray-900">Alex Thompson</cite>
<p className="text-sm text-gray-600">Verified Customer</p>
</div>
</div>
</div>
</div>
</div>
);
}5. Detailed Testimonial Card
Comprehensive testimonial card with company logo, date, detailed feedback, and social proof elements.
Michael Rodriguez
Senior Developer
TechInnovate Inc.
March 15, 2024
"Working with this platform has been transformative for our development team. The intuitive interface, robust feature set, and exceptional customer support have significantly improved our productivity. We've seen a 40% reduction in development time and a marked improvement in code quality. The documentation is comprehensive, and the community support is outstanding. Highly recommended for any serious development team."
Verified Purchase
5.0 Rating
<!-- Detailed Testimonial Card -->
<div class="max-w-2xl mx-auto">
<div class="bg-white rounded-lg shadow-lg p-8">
<div class="flex items-start justify-between mb-6">
<div class="flex items-center">
<img class="w-16 h-16 rounded-full mr-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=face" alt="Michael Rodriguez">
<div>
<h4 class="font-semibold text-gray-900">Michael Rodriguez</h4>
<p class="text-sm text-gray-600">Senior Developer</p>
<p class="text-xs text-gray-500">TechInnovate Inc.</p>
</div>
</div>
<div class="text-right">
<div class="flex items-center mb-2">
<img class="w-8 h-8 mr-2" src="https://via.placeholder.com/32x32/4F46E5/FFFFFF?text=TI" alt="TechInnovate Logo">
<span class="text-sm font-medium text-gray-700">TechInnovate</span>
</div>
<p class="text-xs text-gray-500">March 15, 2024</p>
</div>
</div>
<blockquote class="text-gray-700 mb-6 italic leading-relaxed">
"Working with this platform has been transformative for our development team. The intuitive interface, robust feature set, and exceptional customer support have significantly improved our productivity. We've seen a 40% reduction in development time and a marked improvement in code quality. The documentation is comprehensive, and the community support is outstanding. Highly recommended for any serious development team."
</blockquote>
<div class="border-t border-gray-200 pt-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="flex items-center">
<svg class="w-4 h-4 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<span class="text-sm text-gray-600">Verified Purchase</span>
</div>
<div class="flex items-center">
<svg class="w-4 h-4 text-blue-500 mr-1" 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>
<span class="text-sm text-gray-600">5.0 Rating</span>
</div>
</div>
<div class="flex items-center space-x-2">
<button class="text-gray-400 hover:text-gray-600 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"/>
</svg>
</button>
<button class="text-gray-400 hover:text-gray-600 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div><template>
<!-- Detailed Testimonial Card -->
<div class="max-w-2xl mx-auto">
<div class="bg-white rounded-lg shadow-lg p-8">
<div class="flex items-start justify-between mb-6">
<div class="flex items-center">
<img class="w-16 h-16 rounded-full mr-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=face" alt="Michael Rodriguez">
<div>
<h4 class="font-semibold text-gray-900">Michael Rodriguez</h4>
<p class="text-sm text-gray-600">Senior Developer</p>
<p class="text-xs text-gray-500">TechInnovate Inc.</p>
</div>
</div>
<div class="text-right">
<div class="flex items-center mb-2">
<img class="w-8 h-8 mr-2" src="https://via.placeholder.com/32x32/4F46E5/FFFFFF?text=TI" alt="TechInnovate Logo">
<span class="text-sm font-medium text-gray-700">TechInnovate</span>
</div>
<p class="text-xs text-gray-500">March 15, 2024</p>
</div>
</div>
<blockquote class="text-gray-700 mb-6 italic leading-relaxed">
"Working with this platform has been transformative for our development team. The intuitive interface, robust feature set, and exceptional customer support have significantly improved our productivity. We've seen a 40% reduction in development time and a marked improvement in code quality. The documentation is comprehensive, and the community support is outstanding. Highly recommended for any serious development team."
</blockquote>
<div class="border-t border-gray-200 pt-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="flex items-center">
<svg class="w-4 h-4 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<span class="text-sm text-gray-600">Verified Purchase</span>
</div>
<div class="flex items-center">
<svg class="w-4 h-4 text-blue-500 mr-1" 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>
<span class="text-sm text-gray-600">5.0 Rating</span>
</div>
</div>
<div class="flex items-center space-x-2">
<button class="text-gray-400 hover:text-gray-600 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"/>
</svg>
</button>
<button class="text-gray-400 hover:text-gray-600 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</template>export default function DetailedTestimonialCard() {
return (
<div className="max-w-2xl mx-auto">
<div className="bg-white rounded-lg shadow-lg p-8">
<div className="flex items-start justify-between mb-6">
<div className="flex items-center">
<img className="w-16 h-16 rounded-full mr-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=face" alt="Michael Rodriguez" />
<div>
<h4 className="font-semibold text-gray-900">Michael Rodriguez</h4>
<p className="text-sm text-gray-600">Senior Developer</p>
<p className="text-xs text-gray-500">TechInnovate Inc.</p>
</div>
</div>
<div className="text-right">
<div className="flex items-center mb-2">
<img className="w-8 h-8 mr-2" src="https://via.placeholder.com/32x32/4F46E5/FFFFFF?text=TI" alt="TechInnovate Logo" />
<span className="text-sm font-medium text-gray-700">TechInnovate</span>
</div>
<p className="text-xs text-gray-500">March 15, 2024</p>
</div>
</div>
<blockquote className="text-gray-700 mb-6 italic leading-relaxed">
"Working with this platform has been transformative for our development team. The intuitive interface, robust feature set, and exceptional customer support have significantly improved our productivity. We've seen a 40% reduction in development time and a marked improvement in code quality. The documentation is comprehensive, and the community support is outstanding. Highly recommended for any serious development team."
</blockquote>
<div className="border-t border-gray-200 pt-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="flex items-center">
<svg className="w-4 h-4 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<span className="text-sm text-gray-600">Verified Purchase</span>
</div>
<div className="flex items-center">
<svg className="w-4 h-4 text-blue-500 mr-1" 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>
<span className="text-sm text-gray-600">5.0 Rating</span>
</div>
</div>
<div className="flex items-center space-x-2">
<button className="text-gray-400 hover:text-gray-600 transition-colors">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"/>
</svg>
</button>
<button className="text-gray-400 hover:text-gray-600 transition-colors">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
);
}