Компонент Галерея товаров
Простой компонент галереи товаров, разработанный с 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>Связанные компоненты
Brutalist_RealEstate_Product_Gallery
Сложный, брутальный компонент галереи товаров для объявлений о недвижимости, отличающийся драгоценными тонами, насыщенными насыщенными цветами, высокой контрастностью и поддержкой темного режима. Предназначен для отображения сведений о свойствах с помощью множества интерактивных элементов.
Компонент Галерея товаров
Адаптивный компонент галереи товаров со скевоморфным дизайном, монохромной цветовой схемой и поддержкой темной темы, созданный с помощью Tailwind CSS. Он отличается простой версткой, подходящей для блогов и потребления контента, имитируя реальные элементы с помощью тонких теней и градиентов.