Компоненты Компоненты электронной коммерции Компоненты электронной коммерции

Компоненты электронной коммерции

Компонент электронной коммерции средней сложности с дизайном в темном режиме с использованием цветов земляных тонов для витрины портфолио.

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

HTML-код

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold mb-4">Featured Products</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1" />
            <div class="p-4">
                <h3 class="text-xl font-medium mb-2">Product Title 1</h3>
                <p class="text-gray-300 mb-4">Brief description of the product.</p>
                <span class="text-yellow-500 font-bold">$29.99</span>
                <button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
            </div>
        </div>
        <div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2" />
            <div class="p-4">
                <h3 class="text-xl font-medium mb-2">Product Title 2</h3>
                <p class="text-gray-300 mb-4">Brief description of the product.</p>
                <span class="text-yellow-500 font-bold">$49.99</span>
                <button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
            </div>
        </div>
        <div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3" />
            <div class="p-4">
                <h3 class="text-xl font-medium mb-2">Product Title 3</h3>
                <p class="text-gray-300 mb-4">Brief description of the product.</p>
                <span class="text-yellow-500 font-bold">$19.99</span>
                <button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

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

Ретро-компонент для электронной коммерции

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

Открытый

Brutalism_Retro_Simple_E-commerce_Agriculture_Product_Card

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

Открытый

Геометрическая торговая площадка в стиле ар-деко Карточка товара

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

Открытый