CCHub Logo CCHub Tailwind Collection
Komponenten Galerie Galerie-Komponente

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.

Vorschau

HTML-Code 

<div class="bg-blue-50 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-200 mb-8">Our Work</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-2">Project Alpha</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Alpha, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-red-700 dark:text-red-300 mb-2">Project Beta</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Beta, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-green-700 dark:text-green-300 mb-2">Project Gamma</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Gamma, highlighting its key features and success.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Galerie-Komponente

Eine responsive Galeriekomponente mit Tailwind CSS mit Skeuomorphismus-Design, Pastell-Farbschema und mäßiger Komplexität für Social-Media-Zwecke. Enthält Unterstützung für den Dunkelmodus und verwendet picsum.photos für Bilder und randomuser.me für Avatare.

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 responsive Galeriekomponente mit Mikrointeraktionen für soziale Medien, die mit einem dunklen Theme und einem einfachen Layout mit Tailwind CSS gestaltet wurde.

Offen