В этом уроке мы создадим адаптивные карты в React JS с использованием Tailwind CSS. Мы увидим компонент отзывчивых карточек, попутные карточки рядом с сеткой с помощью Tailwind CSS и React.



Использование инструмента

Реагировать JS
Попутный ветер CSS 3.v

Сначала вам нужно настроить реактивный проект с помощью tailwind css. Вы можете установить вручную или вы читаете ниже блог.
Как установить Tailwind CSS в React
Установка и настройка Vite + React + Typescript + Tailwind CSS 3


Пример 1

Простая карта React Tailwind 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>
    );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Создание простых карточек React Tailwind css


Пример 2

CSS-карта React Tailwind с изображением.

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="
                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>
    );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Реагировать на изображение попутного ветра CSS-карты


Пример 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="
                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

Реагируйте на попутный ветер 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>
        </>
    );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Реагируйте на css-карты попутного ветра рядом, используя сетку