Компонент Галерея товаров
Простой компонент галереи товаров, разработанный с 3D-элементами для глубины с использованием триадической цветовой схемы. Он адаптивный и поддерживает темную тему, подходит для демонстрации работ или товаров.
HTML-код
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Product 4">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Product 5">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 5</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Product 6">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 6</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
</div>
</div>
</div>
</div>Связанные компоненты
ProductGalleryComponent (ТоварГалереяКомпонент)
Компонент Галерея товаров с бруталистским дизайном, адаптивностью и поддержкой темного режима.
Компонент Галерея товаров
Адаптивный компонент галереи товаров, разработанный для пользовательского интерфейса темного режима, с дополнительными цветами, подходящий для интерфейсов социальных сетей.
Компонент Галерея товаров
Отзывчивый компонент Галереи товаров, разработанный с использованием Glassmorphism, включает в себя полупрозрачные элементы, похожие на матовое стекло, с эффектами размытия и дополнительной цветовой схемой. Он включает в себя множество интерактивных элементов, подходящих для электронной коммерции с поддержкой темного режима.