이미지 라이트박스 구성 요소
Tailwind CSS를 사용하여 어두운 모드에서 설계된 반응형 이미지 라이트박스 구성 요소입니다. 어두운 배경, 불투명도 효과 및 다양한 화면 크기를 수용할 수 있는 반응형 디자인이 특징입니다.
HTML 코드
<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')">
×
</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>