Компонент лайтбокса изображения
Компонент лайтбокса с адаптивным изображением со стилем дизайна Neumorphism и поддержкой темной темы с использованием Tailwind CSS.
HTML-код
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group">
<img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-48 h-32 rounded-lg shadow-neu transition-transform duration-300 group-hover:scale-105" />
<div class="hidden absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-75 dark:bg-gray-800 rounded-lg shadow-neu group-hover:block">
<div class="flex items-center justify-center h-full">
<img src="https://picsum.photos/600/400" alt="Lightbox image" class="max-w-full h-auto rounded-lg" />
</div>
</div>
</div>
</div>
<style>
.shadow-neu {
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2),
-8px -8px 20px rgba(255, 255, 255, 0.9);
}
</style>Связанные компоненты
Компонент лайтбокса изображения
Сложный компонент Image Lightbox, выполненный в бруталистском стиле, подходящий для интерфейсов социальных сетей, отличающийся цветовой схемой в оттенках серого и высокой контрастностью для поддержки темного режима.
Компонент лайтбокса изображения
Отзывчивый компонент Image Lightbox, выполненный в стиле Material Design, с триадической цветовой схемой и поддержкой темного режима. Он подходит для портфолио, демонстрирующего работы или продукты.
Компонент лайтбокса изображения
Ретро/винтажный компонент лайтбокса с яркими цветами, адаптивным дизайном и поддержкой темных тем, подходящий для портфолио.