이미지 라이트박스 구성 요소
Tailwind CSS를 사용하여 Glassmorphism 스타일로 디자인된 반응형 이미지 라이트박스 구성 요소입니다. 이 구성 요소는 젖빛 유리와 같은 반투명 요소와 흐림 효과가 있는 어두운 테마를 지원합니다.
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>관련 구성 요소
이미지 라이트박스 구성 요소
브루탈리즘 스타일로 디자인된 복잡한 이미지 라이트박스 컴포넌트로, 소셜 미디어 인터페이스에 적합하며, 그레이스케일 색 구성표와 다크 모드 지원을 위한 고대비가 특징입니다.