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

Компонент Галерея продуктов - 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-дизайна и цветовой гаммой сепия/коричневый, подходящий для приложений Technology/SaaS. Включает в себя несколько интерактивных элементов и поддержку темного режима.

Открытый