CCHub Logo CCHub Tailwind Collection
Komponenten Galerie Galerie-Komponente

Galerie-Komponente

Eine reaktionsschnelle Galeriekomponente mit einem Glassmorphism-Effekt, lebendigen Farben und Unterstützung für dunkle Designs, die für ein Dashboard geeignet ist.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center mb-8 text-gray-800 dark:text-white">Our Vibrant Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-purple-800 dark:text-purple-300">Project Alpha</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">A sleek design project showcasing modern aesthetics.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-red-800 dark:text-red-300">Innovate Beta</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Cutting-edge technology integrated with user-centric design.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-green-800 dark:text-green-300">Data Drive</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Visualizing complex data into intuitive and actionable insights.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum4/400/300" alt="Gallery Image 4" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-blue-800 dark:text-blue-300">Analytics Flow</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Interactive dashboards for real-time performance monitoring.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum5/400/300" alt="Gallery Image 5" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-yellow-800 dark:text-yellow-300">Growth Metrics</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Tracking key growth indicators with dynamic charts.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum6/400/300" alt="Gallery Image 6" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-pink-800 dark:text-pink-300">User Insights</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Understanding user behavior through comprehensive reports.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Brutalistische Galerie-Komponente

Eine reaktionsschnelle, brutalistisch inspirierte Galeriekomponente für Unterhaltungsplattformen mit kontrastreichen, kühlen Neutraltönen und Unterstützung für den Dunkelmodus.

Offen

Minimalistische Sepia-Bildergalerie für Reservierungen

Eine minimalistische und flache Design-Bildergalerie mit warmen Sepia-/Brauntönen, die sich für Buchungs- und Reservierungssysteme eignet. Es verfügt über responsives Design und Unterstützung für den Dunkelmodus.

Offen

Galerie-Komponente

Eine einfache, reaktionsschnelle Bildergalerie-Komponente, die für Geschäfts-/Unternehmenswebsites entwickelt wurde, mit einem triadischen Farbschema, das von den Prinzipien des Material Designs inspiriert ist. Es enthält ein dunkles Design für die Vorlieben des Benutzers und verwendet ein rasterbasiertes Layout.

Offen