Building responsive Cards with Hover Effect using React and Tailwindcss

In this tutorial, we’ll explore how to create an interactive “About” section for a website using React. We’ll be utilizing Tailwind CSS for styling, and the example will involve rendering a series of cards with different topics and descriptions.

Setting Up the Project
To get started, make sure you have Node.js and npm installed. If not, you can download them from the official Node.js website. Once you have them installed, follow these steps:

Create a new React project using Create React App:
npx create-react-app about-section-app
cd about-section-app
In the project directory, replace the content of src/App.js with the following code:

//app.js file
import React from 'react';
import AboutCards from './AboutCards';
const App = () => (
  <>
       <section className=" container mx-auto flex flex-col justify-between gap-2 pb-[20rem]">
      <div className="w-full  px-[2.5rem]">
        {/* about cards */}
        <div className="about-cards flex gap-10 flex-col md:flex-row">
          <AboutCarts />
        </div>
      </div>
    </section>
  </>
);
export default App;

Create a new file named Cards.js in the src directory and add the following code:

//Card.js file
import React from 'react';
function AboutCards() {
  // Card data
 const cardList = [
  {
    img: "https://i.imgur.com/w5HYiQZ.png",
    title: "Growth",
    description:
      "Our group of specialists will collaborate with you to develop a personalized strategy aimed at guiding you toward success through incremental progress.",
  },
  {
    img: "https://i.imgur.com/4wouHGC.png",
    title: "Fitness",
    description:
      "Offering a diverse range of exercises for your selection, you'll have all the resources necessary to attain the peak of your physical fitness.",
  },
  {
    img: "https://i.imgur.com/UdPvj8T.png",
    title: "Diet",
    description:
      "Our team will collaborate with you to craft a tailor-made meal plan designed to assist you in achieving your distinct health objectives.",
  },
];
  return (
    <>
       {cardList.map((card, id) => (
        <div
          key={id}
          className="flex flex-col cursor-pointer bg-white justify-center py-6 px-10 text-center items-center mt-12 rounded-tl-[35px] rounded-br-[35px] shadow-2xl md:min-h-[340px] w-full card-item-div max-w-screen-md min-h-[260px]"
        >
          <img src={card.img} alt="box_img" className="w-[75px] mb-4" />
          <p className="text-[24px] font-bold uppercase mb-7">{card.title}</p>
          <p className="text-[15px] font-medium leading-2 w-full">
            {card.description}
          </p>
        </div>
      ))}
    </>
  );
}
export default AboutCards;

Styling with Tailwind CSS
We’ll be using Tailwind CSS for styling the cards and adding some hover effects. Create a file named index.css in the src directory and add the following content:

/* 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;
}
.card-item-div {
  transition: all 0.2s;
}
.card-item-div:hover {
  background-image: url("https://i.imgur.com/HdaSkzj.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
}

Final Thoughts
Congratulations! You’ve successfully created an interactive “About” section for your website using React and Tailwind CSS. You can further customize the styling and content of the cards to match your website’s design.

This tutorial provides a simple example, and you can extend this concept to create more complex interactive sections or integrate it with other components to build a full-fledged website. Experiment with different layouts, colors, and hover effects to make your website visually appealing and engaging. Happy coding!