React Tailwind CSS 카드 예
16631 단어 tutorialtailwindcssreactwebdev
도구 사용
리액트 JS
순풍 CSS 3.v
먼저 tailwind css로 반응 프로젝트를 설정해야 합니다. 수동으로 설치하거나 아래 블로그를 읽을 수 있습니다.
How to install Tailwind CSS in React
Install & Setup Vite + React + Typescript + Tailwind CSS 3
예 1
순풍 CSS 단순 카드에 반응합니다.
import React from "react";
export default function CardComponent() {
return (
<div className="w-full p-4 shadow-md lg:max-w-lg">
<div className="space-y-2">
<h3 className="text-2xl font-semibold">
React Tailwind Card Title
</h3>
<p className="text-gray-600">
react with tailwind css simple card It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
);
}
예 2
tailwind css 카드를 이미지와 함께 반응합니다.
import React from "react";
export default function CardComponent() {
return (
<div className="w-full rounded-lg shadow-md lg:max-w-sm">
<img
className="object-cover w-full h-48"
src="https://cdn.pixabay.com/photo/2022/08/18/09/20/houses-7394390__340.jpg"
alt="image"
/>
<div className="p-4">
<h4 className="text-xl font-semibold tracking-tight text-blue-600">
React Tailwind Card with Image
</h4>
<p className="mb-2 leading-normal">
react tailwind css card with image It is a long established
fact that a reader will be distracted by the readable
content.
</p>
<button className="px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
Read more
</button>
</div>
</div>
);
}
예 3
뒷바람에 반응하는 가로형 카드 이미지를 반응합니다.
import React from "react";
export default function CardComponent() {
return (
<div className="w-full p-2 rounded-lg shadow-xl lg:flex lg:max-w-lg">
<img
className="object-cover w-full lg:w-40 lg:h-40"
src="https://cdn.pixabay.com/photo/2022/08/18/09/20/houses-7394390__340.jpg"
alt="image"
/>
<div className="pl-2">
<h4 className="text-xl font-semibold tracking-tight text-blue-600">
react tailwind horizontal card image
</h4>
<p className="mb-2 leading-normal">
react tailwind css horizontal card with image It is a long
established fact that a reader will be distracted by the
readable content.
</p>
<button className="px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
Read more
</button>
</div>
</div>
);
}
예 4
tailwind 그리드를 사용하여 tailwind css 카드를 나란히 반응합니다.
import React from "react";
export default function CardComponent() {
const posts = [
{
title: "React Tailwind Card with Grid 1",
img: "https://cdn.pixabay.com/photo/2019/12/17/14/43/christmas-4701783__340.png",
content: "react tailwind css card with image It is a long established fact that a reader will be distracted by the readable content"
},
{
title: "React Tailwind Card with Grid 2",
img: "https://cdn.pixabay.com/photo/2019/12/17/14/43/christmas-4701783__340.png",
content: "react tailwind css card with image It is a long established fact that a reader will be distracted by the readable content"
},
{
title: "React Tailwind Card with Grid 3",
img: "https://cdn.pixabay.com/photo/2019/12/17/14/43/christmas-4701783__340.png",
content: "react tailwind css card with image It is a long established fact that a reader will be distracted by the readable content"
},
{
title: "React Tailwind Card with Grid 4",
img: "https://cdn.pixabay.com/photo/2019/12/17/14/43/christmas-4701783__340.png",
content: "react tailwind css card with image It is a long established fact that a reader will be distracted by the readable content"
},
];
return (
<>
<div className="grid gap-2 lg:grid-cols-4">
{posts.map((items, key) => (
<div className="w-full rounded-lg shadow-md lg:max-w-sm" key={key}>
<img
className="object-cover w-full h-48"
src={items.img}
alt="image"
/>
<div className="p-4">
<h4 className="text-xl font-semibold text-blue-600">
{items.title}
</h4>
<p className="mb-2 leading-normal">
{items.content}
</p>
<button className="px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
Read more
</button>
</div>
</div>
))}
</div>
</>
);
}
Reference
이 문제에 관하여(React Tailwind CSS 카드 예), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/larainfo/react-tailwind-css-cards-example-1d86텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)