ReactとTailwindCSSを使ってホバーエフェクトがついたレスポンシブなカードを作る

npx create-react-app about-section-app
cd about-section-app

//app.js ファイル
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]">
        {/* アバウトカード */}
        <div className="about-cards flex gap-10 flex-col md:flex-row">
          <AboutCarts />
        </div>
      </div>
    </section>
  </>
);
export default App;

//Card.js ファイル
import React from 'react';
function AboutCards() {
  // カードのデータ
  const cardList = [
    {
      img: "https://i.imgur.com/w5HYiQZ.png",
      title: "Growth",
      description:
        "私たちの専門チームはあなたと協力して、段階的な進歩を通じて成功へと導くカスタマイズされた戦略を開発します。",
    },
    {
      img: "https://i.imgur.com/4wouHGC.png",
      title: "Fitness",
      description:
        "さまざまな種類のエクササイズを提供し、あなたがフィットネスの頂点に達するために必要なリソースをすべて揃えます。",
    },
    {
      img: "https://i.imgur.com/UdPvj8T.png",
      title: "Diet",
      description:
        "私たちのチームはあなたと協力して、あなたの独自の健康目標を達成するためのオーダーメイドの食事計画を策定します。",
    },
  ];
  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;

/* 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;
}