Компоненты Карточки товаров Компонент Карточки Товаров

Компонент Карточки Товаров

Отзывчивый компонент карточек товаров с микровзаимодействиями, использующий цветовую схему в оттенках серого и поддерживающий темный режим. Идеально подходит для блога или потребления контента.

Предварительный просмотр

HTML-код

<div class="flex flex-wrap justify-center p-4">
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
</div>

Связанные компоненты

Компонент Карточки Товаров

Отзывчивый компонент карточки товара с ретро/винтажным дизайном, аналогичной цветовой гаммой и поддержкой темной темы, подходящий для приборной панели. Дизайн включает в себя заполнители для изображений и сведений о продукте.

Открытый

Компонент Карточки Товаров

Отзывчивый компонент карточки товара с микровзаимодействиями в земляных тонах, обеспечивающий поддержку темной темы для демонстрации портфолио.

Открытый

Компонент Карточки Товаров

Сложный компонент карточки товара с увлекательными микровзаимодействиями и монохроматической цветовой гаммой. Разработанный для бизнес-сайтов, он адаптивный и поддерживает темный режим.

Открытый