Bild-Lightbox-Komponente
Eine responsive Bild-Lightbox-Komponente, die im Glassmorphism-Stil unter Verwendung von Tailwind CSS erstellt wurde. Die Komponente unterstützt ein dunkles Theme mit mattglasähnlichen durchscheinenden Elementen und Unschärfeeffekten.
HTML-Code
<div class="relative">
<button class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 inline-flex items-center p-2" id="open-lightbox">
<img src="https://picsum.photos/40/40?random" alt="Thumbnail" class="rounded-full">
</button>
<div class="hidden fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="lightbox">
<div class="flex items-center justify-center h-full">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg p-4">
<img src="https://picsum.photos/800/600?random" alt="Lightbox Image" class="rounded-md">
<button class="mt-4 bg-red-500 dark:bg-red-700 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" id="close-lightbox">Close</button>
</div>
</div>
</div>
</div>
<style>
/* Lightbox toggle visibility */
#lightbox:target {
display: flex;
}
</style>Verwandte Komponenten
Bild-Lightbox-Komponente
Eine skeuomorphe Bild-Lightbox-Komponente, die entwickelt wurde, um reale Gegenstücke nachzuahmen, mit responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.
Bild-Lightbox-Komponente
Eine reaktionsschnelle Bild-Lightbox-Komponente mit kühlen neutralen Farben, Farbverlaufsübergängen und Unterstützung für den Dunkelmodus, die sich für professionelle Beratungsdienste eignet.
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.