CCHub Logo CCHub Tailwind Collection
Komponenten Bild-Lightbox Bild-Lightbox-Komponente

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente, die im Dunkelmodus mit Tailwind CSS erstellt wurde. Es verfügt über einen dunklen Hintergrund, Deckkrafteffekte und ansprechende Designs für verschiedene Bildschirmgrößen.

Vorschau

HTML-Code 

<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 hidden" id="lightbox">
    <div class="relative">
        <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="rounded-lg shadow-lg">
        <button class="absolute top-2 right-2 text-white bg-gray-800 hover:bg-gray-700 rounded-full p-2 focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">
            &times;
        </button>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/201" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/202" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/203" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/204" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/205" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
</div>

Verwandte Komponenten

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.

Offen

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.

Offen

Retro-Bild-Lightbox-Komponente

Eine reaktionsschnelle, einfache Bild-Lightbox-Komponente mit Retro-/Vintage-Design, analogem Farbschema und Unterstützung für den Dunkelmodus, geeignet für Blogs und Content-Websites.

Offen