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

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

Простой компонент карточки товара электронной коммерции, выполненный в стиле Material Design с использованием цветовой схемы в оттенках серого и адаптивного дизайна с поддержкой темной темы.

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

HTML-код

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$99.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=2" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the second product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$89.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=3" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the third product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$79.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

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

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

Адаптивный компонент карточек товаров, разработанный по принципам Material Design с использованием Tailwind CSS. Он поддерживает темный режим и включает в себя тени и макеты на основе сетки.

Открытый

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

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

Открытый

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

Отзывчивый компонент карточки товара с дизайном Glassmorphism, цветовой схемой в оттенках серого и поддержкой темной темы. Он включает в себя множество интерактивных элементов, подходящих для интерфейсов социальных сетей, таких как изображение продукта, название, описание, цена и кнопка добавления в корзину. В дизайне используются полупрозрачные элементы, похожие на стекло Froster, с эффектами размытия. Не используется Javascript, только HTML с CSS-классами Tailwind.

Открытый