Компоненты Изображение Лайтбокс Компонент лайтбокса изображения

Компонент лайтбокса изображения

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

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

HTML-код

<div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Image 1 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>
    
    <!-- Add more images as needed -->

  </div>
</div>

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

Компонент лайтбокса изображения

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

Открытый

Компонент лайтбокса изображения

Компонент лайтбокса с адаптивным изображением в стиле ретро/винтаж с использованием Tailwind CSS, поддерживающий темный режим и отображающий изображения-заполнители.

Открытый

Компонент лайтбокса изображения

Компонент Image Lightbox в брутальном стиле, подходящий для блога или контент-платформы, выполненный в земляных тонах и сложных интерактивных элементах.

Открытый