Компонент лайтбокса изображения
Компонент лайтбокса с адаптивным изображением, разработанный в стиле Glassmorphism с использованием Tailwind CSS. Компонент поддерживает темную тему с полупрозрачными элементами, похожими на матовое стекло, и эффектами размытия.
HTML-код
<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>Связанные компоненты
Компонент лайтбокса изображения
Компонент лайтбокса с адаптивным изображением со стилем дизайна Neumorphism и поддержкой темной темы с использованием Tailwind CSS.
Компонент лайтбокса изображения
Компонент лайтбокса с ретро/винтажным дизайном, аналогичная цветовая схема, простая сложность, для бизнеса/корпоративных целей. Адаптивный с поддержкой темных тем. HTML только с Tailwind CSS.
Компонент лайтбокса изображения
Компонент лайтбокса с отзывчивым изображением, выполненный в брутальном стиле с земляными тонами. Он имеет поддержку темного режима для визуализации приборной панели.