我使用的React，我想创建一个产品卡，看起来像图像shown

我用Map来适应现在的数据样式它是我有一个问题，因为我使用显示网格，这里的代码

<div className="incentive-card">
        <div className="incentive-card-header">
          <h3>The power of your donation</h3>
          <p>
            Every drop of blood can transform a life. By donating blood, you
            support accident victims, patients in surgeries, and your community.
          </p>
        </div>
        <div className="incentive-product-card-container">
        {InData.slice(0, 3).map((d) => (
          <div className="product-card2">
            <div className="incentive-card-text">
              <h3>{d.title}</h3>
              <p>{d.description}</p>
            </div>
            <div className="incentive-card-image">
              <img src={d.image} alt="/" />
            </div>
          </div>
        ))}
        </div>
        <div className="incentive-product-card-container">
        {InData.slice(3, 5).map((d) => (
          <div className="product-card2">
            <div className="incentive-card-text">
              <h3>{d.title}</h3>
              <p>{d.description}</p>
            </div>
            <div className="incentive-card-image">
              <img src={d.image} alt="/" />
            </div>
          </div>
        ))}
        </div>
      </div>

字符串
样式代码是

.incentive-card {
  margin-top: 80px;
}

.incentive-card-header h3 {
  color: #454444;
  font-family: Inter;
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  margin-bottom: 30px;
}

.incentive-card-header p {
  color: #454444;
  text-align: center;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 0 20px 0 20px;
  width: 769px;
  margin-left: 20%;
}

.incentive-product-card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  align-items: center;
  padding: 0 5rem;
  gap: 20px;
  row-gap: 40px;
  margin-top: 40px;
}

.incentive-card-text {
  width: 350px;
  height: 190px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  color: #121212;
  border: 1px solid rgba(249, 194, 46, 1);
  background: rgba(249, 194, 46, 1);
  border-bottom: none;
  padding-top: 25px;
}

.incentive-card-text:hover {
  border: 1px solid #000;
  background: #000;
  color: rgba(249, 194, 46, 1);
}

.incentive-card-text h3 {
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  margin-bottom: 10px;
}

.incentive-card-text p {
  font-family: Poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  justify-content: center;
  margin-top: 20px;
  padding: 0 10px 0 10px;
}

.incentive-card-image img {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  width: 350px;
}

型
这是显示的

有没有人知道如何复制第一张图片中的内容