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

Bild-Lightbox-Komponente

Eine komplexe Image-Lightbox-Komponente, die mit skeuomorphen Elementen und einem pastellfarbenen Farbschema entworfen wurde und für Dashboard-Umgebungen geeignet ist. Es enthält ein responsives Layout, Unterstützung für dunkle Themen und eine interaktive Benutzeroberfläche.

Vorschau

HTML-Code 

<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-75 dark:bg-black">
    <div class="bg-gradient-to-br from-pink-300 to-blue-300 rounded-xl shadow-xl p-5 w-full max-w-3xl relative">
        <button class="absolute top-2 right-2 text-gray-700 dark:text-gray-300 font-bold text-lg hover:text-gray-900 dark:hover:text-white transition">
            &times;
        </button>
        <div class="flex justify-center mb-5">
            <img src="https://picsum.photos/600/400" alt="Lightbox Image" class="rounded-lg shadow-lg max-w-full h-auto brightness-90 dark:brightness-75">
        </div>
        <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/200/150?random=1" alt="Thumbnail 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=2" alt="Thumbnail 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=3" alt="Thumbnail 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=4" alt="Thumbnail 4" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=5" alt="Thumbnail 5" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=6" alt="Thumbnail 6" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
        </div>
        <div class="flex justify-between items-center mt-5">
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Previous</button>
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Next</button>
        </div>
    </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

Eine reaktionsschnelle Bild-Lightbox-Komponente, die im brutalistischen Stil mit Erdtönen gestaltet ist. Es bietet eine Unterstützung für den Dunkelmodus für die Dashboard-Visualisierung.

Offen

Bild-Lightbox-Komponente

Eine verspielte und unterhaltsame Bild-Lightbox-Komponente für CRM/Business Tools mit einem Graustufen-Farbschema, abgerundeten Elementen und einer komplexen Benutzeroberfläche für die interaktive Bildbetrachtung. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen