Компонент компонентов электронной коммерции
Отзывчивый компонент электронной коммерции с микровзаимодействиями, аналогичной цветовой схемой и поддержкой темных тем.
HTML-код
<div class="container mx-auto p-4 dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Product 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
<img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 2 (similar structure) -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
<img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент компонентов электронной коммерции
Адаптивный компонент электронной коммерции, предназначенный для темного режима с триадической цветовой схемой, включающей списки товаров, иконку корзины покупок и аватар пользователя.
Компонент компонентов электронной коммерции - Документация/Стиль Wiki
Сложный, отзывчивый компонент электронной коммерции 'Documentation/Wiki' с мягкими, окрашенными текстурами и художественными элементами в конфетно-сладкой цветовой гамме (розовый жевательная резинка, мятно-зеленый). Включает поддержку темного режима и интерактивные элементы для сайта документации или базы знаний.
Ретро-монохромный-товар-сетка
Простой отзывчивый компонент сетки товаров для электронной коммерции в стиле ретро/винтаж, выполненный в монохроматической фиолетовой палитре с поддержкой темных тем. Дизайн вызывает ностальгию по 80-м/90-м годам благодаря простому макету и минимальному количеству элементов, идеально подходящих для покупок в Интернете.