Retro-Galerie-Komponente
Eine reaktionsschnelle Galeriekomponente im Retro-/Vintage-Stil, einem lebendigen Farbschema und einem einfachen Layout für den Konsum von Blogs / Inhalten mit Unterstützung für den Dunkelmodus. Verwendet Tailwind CSS.
HTML-Code
<div class="bg-gray-200 dark:bg-gray-800 p-6"> <div class="container mx-auto"> <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Gallery</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro1/500/300" alt="Gallery Image 1" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 1</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro2/500/300" alt="Gallery Image 2" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 2</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro3/500/300" alt="Gallery Image 3" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 3</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div></div>Verwandte Komponenten
Galerie-Komponente
Eine einfache Galeriekomponente mit Tailwind CSS, die einen Brutalismus-Designstil mit einem triadischen Farbschema und Unterstützung für dunkle Themen für die Präsentation von Arbeiten oder Produkten implementiert.
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.
Event_Gallery_Component
Eine reaktionsschnelle Galeriekomponente für Event- und Konferenz-Websites mit Juwelentönen, Farbverläufen, sanften Übergängen und Unterstützung für den Dunkelmodus. Es präsentiert Veranstaltungshighlights oder Rednerbilder in einem visuell ansprechenden Raster.