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

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

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

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

HTML-код

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
</div>

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

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

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

Открытый

Скевоморфный компонент карточек товаров

Простой, адаптивный компонент карточек товаров со скевоморфным дизайном в оттенках серого, подходит для деловых/корпоративных сайтов. Включает поддержку темного режима.

Открытый

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

Отзывчивый компонент карточки товара с микровзаимодействиями, монохроматическим дизайном и поддержкой темных тем.

Открытый