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

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

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

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

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>

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

Watercolor_Artistic_Dating_Product_Gallery

Сложный, отзывчивый компонент галереи товаров со стилем дизайна «Акварель/Художественный» и цветовой схемой «Конфеты/Сладкое», подходящий для знакомств и социальных платформ. Имеет несколько интерактивных элементов, поддержку темного режима и семантический HTML.

Открытый

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

Адаптивный компонент галереи товаров с использованием Tailwind CSS со стилем дизайна Neumorphic, дополнительной цветовой схемой и сложной версткой, подходящий для бизнес-сайтов. Включает поддержку темного режима и использует изображения из picsum.photos.

Открытый

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

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

Открытый