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.
HTML-Code
<div class="bg-gray-800 dark:bg-gray-900 p-6">
<h1 class="text-4xl font-bold text-green-400 mb-4">Gallery</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=1" alt="Gallery Image 1" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 1</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=2" alt="Gallery Image 2" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 2</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=3" alt="Gallery Image 3" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 3</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=4" alt="Gallery Image 4" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 4</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</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.
Corporate/Professional Gallery-Komponente
Eine reaktionsschnelle und vielseitige Bildergalerie-Komponente mit einer Unternehmens-/Profi-Ästhetik unter Verwendung einer Wald-/Grün-Farbpalette. Es wurde für Bildungsplattformen entwickelt und bietet eine saubere und vertrauenswürdige Benutzeroberfläche mit Unterstützung für den Dunkelmodus.
JewelTone_Photography_Gallery
Eine komplexe, reaktionsschnelle Fotogalerie-Komponente mit juwelenfarbenen Farben und einem klaren, typografischen Layout mit Rastersystemen und Unterstützung für den Dunkelmodus. Ideal für Fotografenportfolios.