Компонент Галерея продуктов - Material Design
Компонент Галереи товаров, вдохновленный Material Design, с адаптивным дизайном, эффектами наведения и поддержкой темных тем. Использует CSS Tailwind.
HTML-код
<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
<div class="dark:bg-gray-800 dark:text-white">
<div class="-m-1 flex flex-wrap md:-m-2">
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=1"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=2"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=3"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=4"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=5"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=6"
/>
</div>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент Галерея товаров
Простой компонент галереи товаров, разработанный с 3D-элементами для глубины с использованием триадической цветовой схемы. Он адаптивный и поддерживает темную тему, подходит для демонстрации работ или товаров.
Компонент Галерея товаров
Адаптивный компонент галереи товаров с поддержкой темной темы, стиль Material Design, цветовая схема земляных тонов, простая сложность, для целей электронной коммерции.
Компонент Галерея товаров
Адаптивный компонент галереи товаров, разработанный в стиле неоморфизм и триадической цветовой схеме, подходящий для демонстрации работ или товаров, с поддержкой темной темы.