Modern Testimonial Card Component with React & Tailwind CSS

Showcase customer experiences effectively using this ready-to-implement testimonial component. Designed with React and Tailwind CSS, it combines visual appeal with functionality through:

Key Features

• Star Rating System: Dynamic SVG stars (1-5 ratings) with color customization
• User Profile Display: Circular avatar with name/title positioning
• Quotation Styling: Automatic “ ” marks around testimonial text
• Customizable Colors: Easy theming via Tailwind classes
• TypeScript Support: Strong typing for testimonial data

Tailwind Testimonial Card

PreviewCode

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien egestas fermentum eget auctor justo. Nullam sit amet nunc nec purus tincidunt aliquam. Nullam sit amet nunc nec purus tincidunt aliquam.

John Doe

Software Engineer

How to Use

1. Import the Component: Add the testimonial card component to your project.
2. Pass Testimonial Data: Provide name, title, feedback, image, and star rating as props.

Copy
1import TestimonialCard from './components/testimonial/testimonial-card'
2
3const testimonials = {
4  name: 'John Doe',
5  title: 'Software Engineer',
6  feedback:
7    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien egestas fermentum eget auctor justo. Nullam sit amet nunc nec purus tincidunt aliquam. Nullam sit amet nunc nec purus tincidunt aliquam.',
8  image: 'https://i.pravatar.cc/150?img=12',
9  stars: 4,
10}
11
12function App() {
13  return (
14    <div className="mx-auto max-w-6xl py-20">
15      <TestimonialCard testimonial={testimonials} />
16    </div>
17  )
18}
19
20export default App