Create Testimonials Using React and Tailwind CSS

Last Updated : 30 Sep, 2024

Customer testimonials are important in modern websites, particularly for businesses that rely on social proof to attract new customers. Displaying authentic customer feedback in an aesthetically pleasing manner can boost credibility and trust.

In this article, we’ll create a Testimonials Section using React and Tailwind CSS and React Icons for added visual appeal.

Prerequisites

Approaches for Creating Testimonial

Initialize a new React project using Create React App and tailwind CSS and configure it for the project.
Set the content paths in the Tailwind configuration file to ensure it processes the relevant files.
Import Tailwind's base styles into the main CSS file of your project.
Define a reusable Testimonial component that will accept props such as the testimonial text, author name, and image.
Ensure the component is styled using Tailwind CSS classes for a clean and modern look.
In the main application component, create a list of testimonial data (like names, texts, and images).
Map through the testimonial data to render the Testimonial component for each entry.

Steps To Create Testimonials

Step 1: Set up a React Application

npx create-react-app react-app
cd react-app

Step 2: Install Tailwind CSS using the command.

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p

Step 3: Configure the tailwind paths in your tailwind.config.js file.

module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {
            colors: {
                primaryGreen: "#4CAF50",  // Green
                primaryBlack: "#000000",  // Black
                primaryWhite: "#FFFFFF",  // White
            }
        },
    },
    plugins: [],
}

Step 4: Add tailwind directives to your index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

body {

    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
        monospace;
}

h2 {
    margin-top: 2rem;
    /* Adjust top margin for spacing */
}

Project Structure

Updated dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example: This demonstrates the creation of Testimonials using React and Tailwind CSS:

JavaScript

// Testimonial.js

import React from 'react';
import { FaStar, FaQuoteLeft } from 'react-icons/fa';

const testimonials = [
    {
        id: 1,
        name: "Jane Doe",
        image: "https://via.placeholder.com/150",
        review: "This product exceeded my expectations! I would 
        definitely recommend it to others.",
        rating: 5,
    },
    {
        id: 2,
        name: "John Smith",
        image: "https://via.placeholder.com/150",
        review: "Great quality and fast shipping. The customer service 
        was also very helpful.",
        rating: 4,
    },
    {
        id: 3,
        name: "Sara Lee",
        image: "https://via.placeholder.com/150",
        review: "I love the design and the functionality of this product. 
        It's perfect for my needs.",
        rating: 5,
    },
    {
        id: 4,
        name: "Michael Johnson",
        image: "https://via.placeholder.com/150",
        review: "Affordable and reliable. I've been using it for a while
        now and it hasn't disappointed.",
        rating: 4,
    },
    {
        id: 5,
        name: "Emily Watson",
        image: "https://via.placeholder.com/150",
        review: "The best product in its category. I can't imagine going 
        back to anything else.",
        rating: 5,
    },
    {
        id: 6,
        name: "David Lee",
        image: "https://via.placeholder.com/150",
        review: "Solid performance and great value for money. Highly recommended!",
        rating: 5,
    }
];

const Testimonial = () => {
    const handleCardClick = (id) => {
        console.log(`Card with ID ${id} clicked!`);
        // You can also navigate to a detailed page or perform any action here
    };

    return (
        <div className="flex flex-col items-center p-6 bg-green-500 min-h-screen">
            <h1 className="text-3xl font-bold text-white mb-8">Testimonials</h1>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8
 max-w-6xl">
                {testimonials.map(({ id, name, image, review, rating }) => (
                    <div
                        key={id}
                        className="bg-white rounded-lg p-6 shadow-lg transform 
                        transition-transform duration-200 hover:scale-105 cursor-pointer"
                        onClick={() => handleCardClick(id)} // Make the card clickable
                    >
                        <div className="flex items-center mb-4">
                            <img className="w-16 h-16 rounded-full mr-4" src={image} 
                            alt={name} />
                            <div>
                                <h2 className="font-semibold text-lg">{name}</h2>
                                <div className="flex text-yellow-500">
                                    {[...Array(rating)].map((_, i) => (
                                        <FaStar key={i} />
                                    ))}
                                </div>
                            </div>
                        </div>
                        <p className="text-gray-600 italic">
                            <FaQuoteLeft className="inline mr-2 text-gray-400" />
                            {review}
                        </p>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default Testimonial;

JavaScript

// App.js

import React from 'react';
import Testimonial from './Testimonial';

const App = () => {
    return (
        <div className="App">
            <Testimonial />
        </div>
    );
};

export default App;

Step 5: Run the Application

Once Development is completed Now we need run the react js application by using below command. By default the react js application run on port number 3000.

npm start

Output:

Create Podcast Template using React and Tailwind CSS

eswarbe06sp

Improve

Article Tags :