Компоненты Галерея Компонент галереи

Компонент галереи

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

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

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">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=1"
           style="transform: translateZ(10px);"
/>
      </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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=2"
           style="transform: translateZ(10px);"
/>
      </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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=3"
           style="transform: translateZ(10px);"
/>
      </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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=4"
           style="transform: translateZ(10px);"
/>
      </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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=5"
           style="transform: translateZ(10px);"
/>
      </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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=6"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
  </div>
</div>

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

Корпоративная/Профессиональная мода/Галерея красоты

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

Открытый

Компонент галереи

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

Открытый

Скевоморфная криптогалерея

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

Открытый