在本教程中，我们将探讨如何使用React为网站创建有关网站的交互式。我们将利用Tailwind CSS进行造型，该示例将涉及一系列具有不同主题和描述的卡。
设置项目
要开始，请确保已安装了node.js和NPM。如果没有，您可以从官方Node.js网站下载它们。安装它们后，请按照以下步骤：
使用Create React App创建一个新的React项目：
npx create-react-app about-section-app
cd about-section-app
在项目目录中，用以下代码替换src/app.js的内容：
//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;
在src目录中创建一个名为card.js的新文件，并添加以下代码：
//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;
tailwind CSS的样式
我们将使用尾风CSS来设计卡片并添加一些悬停效果。在src目录中创建一个名为index.css的文件，并添加以下内容：
/* 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;
}
最后的想法
恭喜！您成功地使用React和Tailwind CSS成功地为您的网站创建了一个互动式。您可以进一步自定义卡片的样式和内容以匹配您的网站设计。
本教程提供了一个简单的示例，您可以扩展此概念以创建更复杂的交互式部分或将其与其他组件集成以构建成熟的网站。尝试不同的布局，颜色和悬停效果，以使您的网站在视觉上吸引人和引人入胜。愉快的编码！