Componente Lightbox immagine
Un componente lightbox per immagini scheumorfiche progettato per imitare le controparti del mondo reale, con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/600/400" alt="Lightbox Image" class="w-full h-auto rounded-lg transition ease-in-out duration-300 transform group-hover:scale-105" />
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity duration-300 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-white">
<h2 class="font-bold text-lg">Image Title</h2>
<p class="text-sm">Image description goes here.</p>
</div>
</div>
<div class="mt-4">
<button class="p-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 shadow-lg">
<span class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
View User's Images
</span>
</button>
</div>
</div>Componenti correlati
Componente Lightbox immagine - Viola scheumorfo
Un componente lightbox per immagini semplice e reattivo con un design scheumorfico nello spettro viola/viola, adatto per piattaforme di lavoro/carriera. Include il supporto per la modalità oscura.
Lightbox immagine scheumorfa
Un componente lightbox per immagini reattivo con un design scheumorfico in scala di grigi per portfolio, che supporta la modalità scura.
Componente Lightbox immagine
Un componente Image Lightbox reattivo progettato per l'e-commerce, con supporto per la modalità scura e una combinazione di colori dei toni della terra.