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

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

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

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

HTML-код

<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 p-6">
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$99.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$89.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$79.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
</div>

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

Компонент Нейморфные карточки товаров - Ретро палитра

Сложный, отзывчивый компонент карточек товаров, разработанный в мягком стиле Neumorphic UI с использованием приглушенной цветовой палитры ретро/винтаж. Функции включают поддержку темного режима, тонкие тени для эффекта выдавливания и семантический HTML для специальных возможностей. Подходит для чтения и потребления контента, например, для блога или отображения контента.

Открытый