Review Components
Beautiful review components built with TailwindCSS. Perfect for displaying customer testimonials, ratings, and feedback.
1. Simple Review Card
A clean and minimal review card with star rating and customer feedback.
"This product exceeded my expectations. The quality is outstanding and the customer service is top-notch."
JD
John Doe
Verified Customer
<!-- Simple Review Card -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<div class="flex items-center mb-4">
<div class="flex text-yellow-400">
<svg class="w-5 h-5" 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>
<svg class="w-5 h-5" 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>
<svg class="w-5 h-5" 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>
<svg class="w-5 h-5" 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>
<svg class="w-5 h-5" 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>
</div>
<span class="ml-2 text-sm text-gray-600">5.0</span>
</div>
<p class="text-gray-700 mb-4">"This product exceeded my expectations. The quality is outstanding and the customer service is top-notch."</p>
<div class="flex items-center">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm">JD</div>
<div class="ml-3">
<p class="font-semibold text-gray-900">John Doe</p>
<p class="text-sm text-gray-600">Verified Customer</p>
</div>
</div>
</div><template>
<!-- Simple Review Card -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<div class="flex items-center mb-4">
<div class="flex text-yellow-400">
<svg class="w-5 h-5" 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>
<svg class="w-5 h-5" 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>
<svg class="w-5 h-5" 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>
<svg class="w-5 h-5" 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>
<svg class="w-5 h-5" 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>
</div>
<span class="ml-2 text-sm text-gray-600">5.0</span>
</div>
<p class="text-gray-700 mb-4">"This product exceeded my expectations. The quality is outstanding and the customer service is top-notch."</p>
<div class="flex items-center">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm">JD</div>
<div class="ml-3">
<p class="font-semibold text-gray-900">John Doe</p>
<p class="text-sm text-gray-600">Verified Customer</p>
</div>
</div>
</div>
</template>export default function SimpleReviewCard() {
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<div className="flex items-center mb-4">
<div className="flex text-yellow-400">
<svg className="w-5 h-5" 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>
<svg className="w-5 h-5" 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>
<svg className="w-5 h-5" 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>
<svg className="w-5 h-5" 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>
<svg className="w-5 h-5" 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>
</div>
<span className="ml-2 text-sm text-gray-600">5.0</span>
</div>
<p className="text-gray-700 mb-4">"This product exceeded my expectations. The quality is outstanding and the customer service is top-notch."</p>
<div className="flex items-center">
<div className="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm">JD</div>
<div className="ml-3">
<p className="font-semibold text-gray-900">John Doe</p>
<p className="text-sm text-gray-600">Verified Customer</p>
</div>
</div>
</div>
);
}2. Star Rating Review
Interactive star rating component with hover effects and dynamic feedback.
Rate this product
Your rating: out of 5 stars
<!-- Star Rating Review -->
<div x-data="{ rating: 4 }">
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<div class="text-center">
<h3 class="text-lg font-semibold mb-4">Rate this product</h3>
<div class="flex justify-center mb-4">
<template x-for="star in 5" :key="star">
<button @click="rating = star" @mouseenter="rating = star" @mouseleave="rating = rating" class="text-2xl transition-colors" :class="star <= rating ? 'text-yellow-400' : 'text-gray-300'">
★
</button>
</template>
</div>
<p class="text-sm text-gray-600">Your rating: <span x-text="rating"></span> out of 5 stars</p>
</div>
</div>
</div><template>
<!-- Star Rating Review -->
<div>
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<div class="text-center">
<h3 class="text-lg font-semibold mb-4">Rate this product</h3>
<div class="flex justify-center mb-4">
<button v-for="star in 5" :key="star" @click="rating = star" @mouseenter="rating = star" @mouseleave="rating = rating" class="text-2xl transition-colors" :class="star <= rating ? 'text-yellow-400' : 'text-gray-300'">
★
</button>
</div>
<p class="text-sm text-gray-600">Your rating: {{ rating }} out of 5 stars</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const rating = ref(4)
</script>import React, { useState } from 'react'
export default function StarRatingReview() {
const [rating, setRating] = useState(4)
const [hoverRating, setHoverRating] = useState(0)
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<div className="text-center">
<h3 className="text-lg font-semibold mb-4">Rate this product</h3>
<div className="flex justify-center mb-4">
{[...Array(5)].map((_, index) => {
const starValue = index + 1
return (
<button
key={index}
className={`text-2xl transition-colors ${starValue <= (hoverRating || rating) ? 'text-yellow-400' : 'text-gray-300'}`}
onClick={() => setRating(starValue)}
onMouseEnter={() => setHoverRating(starValue)}
onMouseLeave={() => setHoverRating(0)}
>
★
</button>
)
})}
</div>
<p className="text-sm text-gray-600">Your rating: {rating} out of 5 stars</p>
</div>
</div>
);
}3. Detailed Review with Avatar
Comprehensive review card with user avatar, detailed feedback, and verification badge.
Sarah Johnson
Verified
★★★★★
"I've been using this service for 6 months now and I'm impressed with the consistent quality and reliability. The support team is always responsive and helpful."
Product: Premium Plan
2 days ago
<!-- Detailed Review with Avatar -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full">
<div class="flex items-start space-x-4">
<img class="w-12 h-12 rounded-full" src="https://via.placeholder.com/48" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center">
<h4 class="font-semibold text-gray-900">Sarah Johnson</h4>
<span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Verified</span>
</div>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span class="text-gray-300">★</span>
</div>
</div>
<p class="text-gray-700 mb-3">"I've been using this service for 6 months now and I'm impressed with the consistent quality and reliability. The support team is always responsive and helpful."</p>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>Product: Premium Plan</span>
<span>2 days ago</span>
</div>
<div class="flex items-center mt-3 space-x-4">
<button class="text-purple-600 hover:text-purple-800 text-sm font-medium">Helpful (12)</button>
<button class="text-gray-500 hover:text-gray-700 text-sm">Reply</button>
</div>
</div>
</div>
</div><template>
<!-- Detailed Review with Avatar -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full">
<div class="flex items-start space-x-4">
<img class="w-12 h-12 rounded-full" src="https://via.placeholder.com/48" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center">
<h4 class="font-semibold text-gray-900">Sarah Johnson</h4>
<span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Verified</span>
</div>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span class="text-gray-300">★</span>
</div>
</div>
<p class="text-gray-700 mb-3">"I've been using this service for 6 months now and I'm impressed with the consistent quality and reliability. The support team is always responsive and helpful."</p>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>Product: Premium Plan</span>
<span>2 days ago</span>
</div>
<div class="flex items-center mt-3 space-x-4">
<button class="text-purple-600 hover:text-purple-800 text-sm font-medium">Helpful (12)</button>
<button class="text-gray-500 hover:text-gray-700 text-sm">Reply</button>
</div>
</div>
</div>
</div>
</template>export default function DetailedReviewWithAvatar() {
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full">
<div className="flex items-start space-x-4">
<img className="w-12 h-12 rounded-full" src="https://via.placeholder.com/48" alt="User Avatar" />
<div className="flex-1">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center">
<h4 className="font-semibold text-gray-900">Sarah Johnson</h4>
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Verified</span>
</div>
<div className="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span className="text-gray-300">★</span>
</div>
</div>
<p className="text-gray-700 mb-3">"I've been using this service for 6 months now and I'm impressed with the consistent quality and reliability. The support team is always responsive and helpful."</p>
<div className="flex items-center justify-between text-sm text-gray-500">
<span>Product: Premium Plan</span>
<span>2 days ago</span>
</div>
<div className="flex items-center mt-3 space-x-4">
<button className="text-purple-600 hover:text-purple-800 text-sm font-medium">Helpful (12)</button>
<button className="text-gray-500 hover:text-gray-700 text-sm">Reply</button>
</div>
</div>
</div>
</div>
);
}4. Review Carousel
Interactive carousel displaying multiple customer reviews with navigation controls.
★★★★★
"Outstanding service! The team went above and beyond to ensure our satisfaction."
MJ
Mike Johnson
CEO, TechCorp
★★★★★
"The quality of work is exceptional. Highly recommend to anyone looking for professional services."
AS
Anna Smith
Designer, Creative Studio
<!-- Review Carousel -->
<div x-data="{ currentSlide: 0 }">
<div class="w-full max-w-4xl">
<div class="relative overflow-hidden">
<div class="flex transition-transform duration-300" :style="`transform: translateX(-${currentSlide * 100}%)`">
<div class="w-full flex-shrink-0 px-4">
<div class="bg-white rounded-lg shadow-lg p-6 text-center">
<div class="flex justify-center mb-4">
<span class="text-yellow-400 text-2xl">★★★★★</span>
</div>
<p class="text-gray-700 mb-4">"Outstanding service! The team went above and beyond to ensure our satisfaction."</p>
<div class="flex items-center justify-center">
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold mr-3">MJ</div>
<div>
<p class="font-semibold">Mike Johnson</p>
<p class="text-sm text-gray-600">CEO, TechCorp</p>
</div>
</div>
</div>
</div>
<div class="w-full flex-shrink-0 px-4">
<div class="bg-white rounded-lg shadow-lg p-6 text-center">
<div class="flex justify-center mb-4">
<span class="text-yellow-400 text-2xl">★★★★★</span>
</div>
<p class="text-gray-700 mb-4">"The quality of work is exceptional. Highly recommend to anyone looking for professional services."</p>
<div class="flex items-center justify-center">
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold mr-3">AS</div>
<div>
<p class="font-semibold">Anna Smith</p>
<p class="text-sm text-gray-600">Designer, Creative Studio</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-6 space-x-2">
<button @click="currentSlide = 0" :class="currentSlide === 0 ? 'bg-purple-600 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-purple-600 text-white' : 'bg-gray-300 text-gray-700'" class="w-3 h-3 rounded-full transition-colors"></button>
</div>
</div>
</div><template>
<!-- Review Carousel -->
<div>
<div class="w-full max-w-4xl">
<div class="relative overflow-hidden">
<div class="flex transition-transform duration-300" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
<div class="w-full flex-shrink-0 px-4">
<div class="bg-white rounded-lg shadow-lg p-6 text-center">
<div class="flex justify-center mb-4">
<span class="text-yellow-400 text-2xl">★★★★★</span>
</div>
<p class="text-gray-700 mb-4">"Outstanding service! The team went above and beyond to ensure our satisfaction."</p>
<div class="flex items-center justify-center">
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold mr-3">MJ</div>
<div>
<p class="font-semibold">Mike Johnson</p>
<p class="text-sm text-gray-600">CEO, TechCorp</p>
</div>
</div>
</div>
</div>
<div class="w-full flex-shrink-0 px-4">
<div class="bg-white rounded-lg shadow-lg p-6 text-center">
<div class="flex justify-center mb-4">
<span class="text-yellow-400 text-2xl">★★★★★</span>
</div>
<p class="text-gray-700 mb-4">"The quality of work is exceptional. Highly recommend to anyone looking for professional services."</p>
<div class="flex items-center justify-center">
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold mr-3">AS</div>
<div>
<p class="font-semibold">Anna Smith</p>
<p class="text-sm text-gray-600">Designer, Creative Studio</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-6 space-x-2">
<button @click="currentSlide = 0" :class="currentSlide === 0 ? 'bg-purple-600 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-purple-600 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 ReviewCarousel() {
const [currentSlide, setCurrentSlide] = useState(0)
return (
<div className="w-full max-w-4xl">
<div className="relative overflow-hidden">
<div className="flex transition-transform duration-300" style= {{ transform: `translateX(-${currentSlide * 100}%)` }}>
<div className="w-full flex-shrink-0 px-4">
<div className="bg-white rounded-lg shadow-lg p-6 text-center">
<div className="flex justify-center mb-4">
<span className="text-yellow-400 text-2xl">★★★★★</span>
</div>
<p className="text-gray-700 mb-4">"Outstanding service! The team went above and beyond to ensure our satisfaction."</p>
<div className="flex items-center justify-center">
<div className="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold mr-3">MJ</div>
<div>
<p className="font-semibold">Mike Johnson</p>
<p className="text-sm text-gray-600">CEO, TechCorp</p>
</div>
</div>
</div>
</div>
<div className="w-full flex-shrink-0 px-4">
<div className="bg-white rounded-lg shadow-lg p-6 text-center">
<div class="flex justify-center mb-4">
<span className="text-yellow-400 text-2xl">★★★★★</span>
</div>
<p className="text-gray-700 mb-4">"The quality of work is exceptional. Highly recommend to anyone looking for professional services."</p>
<div className="flex items-center justify-center">
<div className="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold mr-3">AS</div>
<div>
<p className="font-semibold">Anna Smith</p>
<p className="text-sm text-gray-600">Designer, Creative Studio</p>
</div>
</div>
</div>
</div>
</div>
</div>
<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-purple-600 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-purple-600 text-white' : 'bg-gray-300 text-gray-700'}`}></button>
</div>
</div>
);
}5. Review Grid
Grid layout displaying multiple reviews with consistent spacing and responsive design.
JD
John Doe
★★★★★
"Excellent product! The quality is outstanding and the delivery was fast."
SJ
Sarah Johnson
★★★★★
"Great customer service and support. Would definitely recommend to others."
MJ
Mike Johnson
★★★★★
"The best purchase I've made this year. Highly satisfied with the results."
<!-- Review Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl">
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">JD</div>
<div>
<h4 class="font-semibold">John Doe</h4>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
</div>
<p class="text-gray-700 text-sm">"Excellent product! The quality is outstanding and the delivery was fast."</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">SJ</div>
<div>
<h4 class="font-semibold">Sarah Johnson</h4>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span class="text-gray-300">★</span>
</div>
</div>
</div>
<p class="text-gray-700 text-sm">"Great customer service and support. Would definitely recommend to others."</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">MJ</div>
<div>
<h4 class="font-semibold">Mike Johnson</h4>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
</div>
<p class="text-gray-700 text-sm">"The best purchase I've made this year. Highly satisfied with the results."</p>
</div>
</div><template>
<!-- Review Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl">
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">JD</div>
<div>
<h4 class="font-semibold">John Doe</h4>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
</div>
<p class="text-gray-700 text-sm">"Excellent product! The quality is outstanding and the delivery was fast."</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">SJ</div>
<div>
<h4 class="font-semibold">Sarah Johnson</h4>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span class="text-gray-300">★</span>
</div>
</div>
</div>
<p class="text-gray-700 text-sm">"Great customer service and support. Would definitely recommend to others."</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">MJ</div>
<div>
<h4 class="font-semibold">Mike Johnson</h4>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
</div>
<p class="text-gray-700 text-sm">"The best purchase I've made this year. Highly satisfied with the results."</p>
</div>
</div>
</template>export default function ReviewGrid() {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl">
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<div className="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">JD</div>
<div>
<h4 className="font-semibold">John Doe</h4>
<div className="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
</div>
<p className="text-gray-700 text-sm">"Excellent product! The quality is outstanding and the delivery was fast."</p>
</div>
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<div className="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">SJ</div>
<div>
<h4 className="font-semibold">Sarah Johnson</h4>
<div className="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span className="text-gray-300">★</span>
</div>
</div>
</div>
<p className="text-gray-700 text-sm">"Great customer service and support. Would definitely recommend to others."</p>
</div>
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<div className="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">MJ</div>
<div>
<h4 className="font-semibold">Mike Johnson</h4>
<div className="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
</div>
<p className="text-gray-700 text-sm">"The best purchase I've made this year. Highly satisfied with the results."</p>
</div>
</div>
);
}6. Review Form with Submission
Interactive review form with submission handling and dynamic display of submitted reviews.
Write a Review
Recent Reviews
JD
John Doe
★★★★★
"Excellent product! The quality is outstanding and the delivery was fast."
SJ
Sarah Johnson
★★★★★
"Great customer service and support. Would definitely recommend to others."
<!-- Review Form with Submission -->
<div x-data="{ submitted: false, name: '', email: '', rating: 0, comment: '', reviews: [] }">
<!-- Review Form -->
<div x-show="!submitted" class="bg-white rounded-lg shadow-lg p-6 mb-6">
<h3 class="text-lg font-semibold mb-4">Write a Review</h3>
<form @submit.prevent="submitReview">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Name</label>
<input type="text" x-model="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500" required>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input type="email" x-model="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500" required>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Rating</label>
<div class="flex space-x-1">
<template x-for="star in 5" :key="star">
<button type="button" @click="rating = star" class="text-2xl" :class="star <= rating ? 'text-yellow-400' : 'text-gray-300'">★</button>
</template>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Comment</label>
<textarea x-model="comment" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500" required></textarea>
</div>
<button type="submit" class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 transition-colors">Submit Review</button>
</form>
</div>
<!-- Submitted Reviews -->
<div x-show="submitted" class="space-y-4">
<h3 class="text-lg font-semibold mb-4">Recent Reviews</h3>
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">JD</div>
<div>
<h4 class="font-semibold">John Doe</h4>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
</div>
<p class="text-gray-700">"Excellent product! The quality is outstanding and the delivery was fast."</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">SJ</div>
<div>
<h4 class="font-semibold">Sarah Johnson</h4>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span class="text-gray-300">★</span>
</div>
</div>
</div>
<p class="text-gray-700">"Great customer service and support. Would definitely recommend to others."</p>
</div>
</div>
</div><template>
<!-- Review Form with Submission -->
<div>
<!-- Review Form -->
<div v-if="!submitted" class="bg-white rounded-lg shadow-lg p-6 mb-6">
<h3 class="text-lg font-semibold mb-4">Write a Review</h3>
<form @submit.prevent="submitReview">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Name</label>
<input type="text" v-model="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500" required>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input type="email" v-model="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500" required>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Rating</label>
<div class="flex space-x-1">
<button type="button" v-for="star in 5" :key="star" @click="rating = star" class="text-2xl" :class="star <= rating ? 'text-yellow-400' : 'text-gray-300'">★</button>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Comment</label>
<textarea v-model="comment" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500" required></textarea>
</div>
<button type="submit" class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 transition-colors">Submit Review</button>
</form>
</div>
<!-- Submitted Reviews -->
<div v-if="submitted" class="space-y-4">
<h3 class="text-lg font-semibold mb-4">Recent Reviews</h3>
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">JD</div>
<div>
<h4 class="font-semibold">John Doe</h4>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
</div>
<p class="text-gray-700">"Excellent product! The quality is outstanding and the delivery was fast."</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">SJ</div>
<div>
<h4 class="font-semibold">Sarah Johnson</h4>
<div class="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span class="text-gray-300">★</span>
</div>
</div>
</div>
<p class="text-gray-700">"Great customer service and support. Would definitely recommend to others."</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const submitted = ref(false)
const name = ref('')
const email = ref('')
const rating = ref(0)
const comment = ref('')
const reviews = ref([])
const submitReview = () => {
submitted.value = true
reviews.value.push({ name: name.value, email: email.value, rating: rating.value, comment: comment.value })
}
</script>import React, { useState } from 'react'
export default function ReviewFormWithSubmission() {
const [submitted, setSubmitted] = useState(false)
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [rating, setRating] = useState(0)
const [comment, setComment] = useState('')
const [reviews, setReviews] = useState([])
const handleSubmit = (e) => {
e.preventDefault()
setSubmitted(true)
setReviews([...reviews, { name, email, rating, comment }])
}
return (
<div className="w-full max-w-2xl">
<!-- Review Form -->
{!submitted && (
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
<h3 className="text-lg font-semibold mb-4">Write a Review</h3>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label className="block text-sm font-medium text-gray-700 mb-2">Name</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500"
required
/>
</div>
<div className="mb-4">
<label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500"
required
/>
</div>
<div className="mb-4">
<label className="block text-sm font-medium text-gray-700 mb-2">Rating</label>
<div className="flex space-x-1">
{[...Array(5)].map((_, index) => {
const starValue = index + 1
return (
<button
key={index}
type="button"
onClick={() => setRating(starValue)}
className={`text-2xl ${starValue <= rating ? 'text-yellow-400' : 'text-gray-300'}`}
>
★
</button>
)
})}
</div>
</div>
<div className="mb-4">
<label className="block text-sm font-medium text-gray-700 mb-2">Comment</label>
<textarea
value={comment}
onChange={(e) => setComment(e.target.value)}
rows="4"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500"
required
/>
</div>
<button type="submit" className="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 transition-colors">Submit Review</button>
</form>
</div>
)}
<!-- Submitted Reviews -->
{submitted && (
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-4">Recent Reviews</h3>
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<div className="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">JD</div>
<div>
<h4 className="font-semibold">John Doe</h4>
<div className="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
</div>
<p className="text-gray-700">"Excellent product! The quality is outstanding and the delivery was fast."</p>
</div>
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<div className="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">SJ</div>
<div>
<h4 className="font-semibold">Sarah Johnson</h4>
<div className="flex text-yellow-400">
<span>★</span><span>★</span><span>★</span><span>★</span><span className="text-gray-300">★</span>
</div>
</div>
</div>
<p className="text-gray-700">"Great customer service and support. Would definitely recommend to others."</p>
</div>
</div>
)}
</div>
);
}