Building a Testimonials Carousel with React, Nuka Carousel, and Tailwind CSS

Testimonials are a crucial aspect of building trust and credibility for any product or service. In this tutorial, we will walk through the process of creating a dynamic testimonials carousel using React, the Nuka Carousel library, and Tailwind CSS. This carousel will display multiple testimonials, allowing users to view different feedback entries in a visually appealing and interactive way.

Introduction

Before we begin, let's briefly introduce the technologies we'll be using:

React: A popular JavaScript library for building user interfaces, enabling us to create reusable UI components.
Nuka Carousel: A flexible and customizable carousel library for React, which provides various transition effects and autoplay options.
Tailwind CSS: A utility-first CSS framework that offers a wide range of pre-defined styles and classes for rapid UI development.
Getting Started
To start building our testimonials carousel, follow these steps:

Set Up React Project: Set up a new React project using your preferred tool (e.g., Create React App) and navigate to the project directory.
Install Dependencies: Install the required libraries by running the following command in your project directory:

npm install nuka-carousel react react-dom tailwindcss

Project Structure: Create the necessary component files within a new folder named components. Your project structure should look `like this:

• src
  • components
  • Testimonials.jsx
  • FeedbackCard.jsx
  • App.jsx
  • index.css
  • index.js` Now that our project is set up, let's dive into the code for each component.

The FeedbackCard Component

We'll start by creating the FeedbackCard component, which represents an individual feedback entry within the carousel.

// src/components/FeedbackCard.jsx

const FeedbackCard = ({ content, name, title, img }) => (
  <div className="flex justify-between  flex-col  px-10 py-12 rounded-[20px]  max-w-[370px]  mx-auto my-0 feedback-card">
    <img
      src={"https://i.imgur.com/rx3eOUo.png"}
      alt="double_quotes"
      className="w-[42.6px] h-[27.6px] object-contain"
    />
    <p className="font-poppins font-normal text-[18px] leading-[32.4px] text-white my-10">
      {content}
    </p>

    <div className="flex flex-row">
      <img src={img} alt={name} className=" rounded-full" />
      <div className="flex flex-col ml-4">
        <h4 className="font-poppins font-semibold text-[20px] leading-[32px] text-white">
          {name}
        </h4>
        <p className="font-poppins font-normal text-[16px] leading-[24px] text-dimWhite">
          {title}
        </p>
      </div>
    </div>
  </div>
);

export default FeedbackCard;

In this component, we define a card layout to display the feedback content, the person's name, and their title. The img prop represents the URL of the person's profile picture. We use Tailwind CSS classes to style the card, including its dimensions, colors, and spacing.

The Testimonials Component

Now, let's create the Testimonials component, which acts as the container for the testimonials carousel.

// src/components/Testimonials.jsx

import FeedbackCard from "./FeedbackCard";
import Carousel from "nuka-carousel";

const feedback = [
  {
    id: "feedback-1",
    content:
      "Money is only a tool. It will take you wherever you wish, but it will not replace you as the driver.",
    name: "Herman Jensen",
    title: "Founder & Leader",
    img: "https://i.imgur.com/Dn0qoCG.png",
  },
  {
    id: "feedback-2",
    content:
      "Money makes your life easier. If you're lucky to have it, you're lucky.",
    name: "Steve Mark",
    title: "Founder & Leader",
    img: "https://i.imgur.com/fk8eEvW.png",
  },
  {
    id: "feedback-3",
    content:
      "It is usually people in the money business, finance, and international trade that are really rich.",
    name: "Kenn Gallagher",
    title: "Founder & Leader",
    img: "https://i.imgur.com/dLxxRDy.png",
  },
];

const Testimonials = () => (
  <section
    id="clients"
    className={`sm:py-16 py-6 flex justify-center items-center flex-col relative `}
  >
    <div className="absolute z-[0] w-[60%] h-[60%] -right-[50%] rounded-full blue__gradient bottom-40" />

    <div className="w-full flex justify-between items-center md:flex-row flex-col sm:mb-16 mb-6 relative z-[1]">
      <h2
        className={`font-poppins font-semibold xs:text-[48px] text-[40px] text-white xs:leading-[76.8px] leading-[66.8px] w-full`}
      >
        What People are <br className="sm:block hidden" /> saying about us
      </h2>
      <div className="w-full md:mt-0 mt-6">
        <p
          className={`font-poppins font-normal text-dimWhite text-[18px] leading-[30.8px] text-left max-w-[450px]`}
        >
          Everything you need to accept card payments and grow your business
          anywhere on the planet.
        </p>
      </div>
    </div>
    <Carousel autoplay autoplayInterval={3000} wrapAround={true}>
      {feedback.map((card) => (
        <FeedbackCard key={card.id} {...card} />
      ))}
    </Carousel>
  </section>
);

export default Testimonials;

In the Testimonials component, we import the FeedbackCard component and the Carousel from the Nuka Carousel library. We define the feedback array to hold the data for various feedback entries.

Within the Testimonials component, we set up the container for the carousel and use Tailwind CSS classes to style its background and spacing.

Styling with Tailwind CSS
Now, let's add the styles for our project using Tailwind CSS. We'll utilize the index.css file for this purpose.

/* src/index.css */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

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

:root {
  --black-gradient: linear-gradient(
    144.39deg,
    #ffffff -278.56%,
    #6d6d6d -78.47%,
    #11101d 91.61%
  );
  --card-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1);
}

* {
  scroll-behavior: smooth;
}

.feature-card:hover {
  background: var(--black-gradient);
  box-shadow: var(--card-shadow);
}

.feedback-card {
  background: transparent;
}

.feedback-card:hover {
  background: var(--black-gradient);
}

.bg-blue-gradient {
  background: linear-gradient(
    157.81deg,
    #def9fa -43.27%,
    #bef3f5 -21.24%,
    #9dedf0 12.19%,
    #7de7eb 29.82%,
    #5ce1e6 51.94%,
    #33bbcf 90.29%
  );
}

.slider-container {
  @apply w-full;
}

In the index.css file, we import the Google Fonts Poppins and apply it as the default font for the entire application. We also customize the container class to set a maximum width for the content.

Additionally, we define a reusable gradient background class using Tailwind CSS's bg-gradient-to-r class, allowing us to apply a gradient background to any element by setting the appropriate color stops.

Bringing It All Together in App.js
Now, let's bring all the components together in the main App.js file.

// src/App.js

import { Testimonials } from "./components";

const App = () => (
  <div className="bg-primary w-full overflow-hidden">
    <div className={`container mx-auto`}>
      <div className={`xl:max-w-[1280px] w-full`}>
        <Testimonials />
      </div>
    </div>
  </div>
);

export default App;

In the App.js file, we import the Testimonials component and the index.css file. We then render the Testimonials component within a container with a light gray background.

Conclusion

Congratulations! You've successfully built a testimonials carousel using React, Nuka Carousel, and Tailwind CSS. Your carousel now showcases multiple feedback entries in an interactive and visually appealing manner, providing valuable social proof to your users.

Feel free to customize the colors, styles, and transitions to match your project's design. With this powerful combination of technologies, you can create dynamic and engaging carousels to display various types of content on your website. Happy coding!