Компоненты Галерея продукции Компонент Галерея товаров

Компонент Галерея товаров

Компонент галереи товаров с микровзаимодействиями.

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

HTML-код


<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <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 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          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 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          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 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          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 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          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 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          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 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=6" />
      </div>
    </div>
  </div>
</div>

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

Компонент Галерея товаров

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

Открытый

Компонент Галерея товаров

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

Открытый

Компонент Галерея товаров

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

Открытый