Bild-Lightbox-Komponente
Eine responsive Image-Lightbox-Komponente, die mit 3D-Elementen, lebendigen Farben und moderater Komplexität für Geschäfts-/Unternehmenswebsites entwickelt wurde. Es unterstützt das Styling im Dunkelmodus mit Tailwind CSS.
HTML-Code
<div class="relative p-4 max-w-lg mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Thumbnail Images -->
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=1" alt="Image 1" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=2" alt="Image 2" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=3" alt="Image 3" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=4" alt="Image 4" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
</div>
</div>
<!-- Dark Mode Support -->
<style>
.bg-vibrant-500 {
background-color: #ff4c4c; /* Example vibrant color */
}
@media (prefers-color-scheme: dark) {
.bg-vibrant-500 {
background-color: #ff6b6b; /* Dark mode vibrant color */
}
}
</style>Verwandte Komponenten
Bild-Lightbox-Komponente
Image Lightbox Komponente mit Retro / Vintage-Design, analoges Farbschema, einfache Komplexität, für Geschäfts- / Unternehmenszwecke. Reaktionsschnell mit Unterstützung für dunkle Themen. HTML nur mit Tailwind CSS.
Bild-Lightbox-Komponente
Eine komplexe Bild-Lightbox-Komponente, die im brutalistischen Stil gestaltet ist und sich für Social-Media-Schnittstellen eignet, mit einem Graustufen-Farbschema und hohem Kontrast für die Unterstützung des Dunkelmodus.
Bild-Lightbox-Komponente
Eine reaktionsschnelle Bild-Lightbox-Komponente mit Unterstützung für den Dunkelmodus. Diese Komponente zeigt eine Bildergalerie an, und wenn Sie auf ein Bild klicken, wird ein Vollbildmodal mit Navigationspfeilen zum Durchsuchen der Bilder geöffnet. Es verfügt über eine Schließen-Schaltfläche und verwendet lebendige Farben, um interaktive Elemente hervorzuheben. Das Design ist auf den Geschäfts-/Unternehmenskontext zugeschnitten und gewährleistet eine professionelle und dennoch ansprechende Benutzererfahrung.