This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by larainfo
In this tutorial, we will create responsive cards in react js using tailwind css. We will see responsive cards component, tailwind side by side cards with grid with Tailwind CSS & React.
Tool Use
React JS
Tailwind CSS 3.v
First you need to setup react project with tailwind css. You can install manually or you read below blog.
How to install Tailwind CSS in React
Install & Setup Vite + React + Typescript + Tailwind CSS 3
Example 1
React tailwind css simple card.
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>
);
}
Example 2
React tailwind css card with image.
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>
);
}
Example 3
React tailwind responsive horizontal card image.
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>
);
}
Example 4
React tailwind css side by side card using tailwind grid.
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>
</>
);
}
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by larainfo
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
larainfo | Sciencx (2022-09-05T11:42:06+00:00) React Tailwind CSS Cards Example. Retrieved from https://www.scien.cx/2022/09/05/react-tailwind-css-cards-example/
" » React Tailwind CSS Cards Example." larainfo | Sciencx - Monday September 5, 2022, https://www.scien.cx/2022/09/05/react-tailwind-css-cards-example/
HARVARDlarainfo | Sciencx Monday September 5, 2022 » React Tailwind CSS Cards Example., viewed ,<https://www.scien.cx/2022/09/05/react-tailwind-css-cards-example/>
VANCOUVERlarainfo | Sciencx - » React Tailwind CSS Cards Example. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/05/react-tailwind-css-cards-example/
CHICAGO" » React Tailwind CSS Cards Example." larainfo | Sciencx - Accessed . https://www.scien.cx/2022/09/05/react-tailwind-css-cards-example/
IEEE" » React Tailwind CSS Cards Example." larainfo | Sciencx [Online]. Available: https://www.scien.cx/2022/09/05/react-tailwind-css-cards-example/. [Accessed: ]
rf:citation » React Tailwind CSS Cards Example | larainfo | Sciencx | https://www.scien.cx/2022/09/05/react-tailwind-css-cards-example/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.