CCHub Logo CCHub Tailwind Collection
구성 요소 이미지 라이트박스 이미지 라이트박스 구성 요소

이미지 라이트박스 구성 요소

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')">
            &times;
        </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>

관련 구성 요소

이미지 라이트박스 구성 요소

현실 세계를 모방하도록 설계된 스큐어모픽 이미지 라이트박스 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

열다

이미지 라이트박스 구성 요소

머티리얼 디자인 스타일로 디자인된 반응형 이미지 라이트박스 구성요소로, 트라이어딕 색 구성표와 다크 모드 지원이 특징입니다. 작품이나 제품을 전시하는 포트폴리오에 적합합니다.

열다

이미지 라이트박스 구성 요소

레트로/빈티지 디자인의 이미지 라이트박스 구성 요소, 유사한 색 구성표, 단순한 복잡성, 비즈니스/기업용. 어두운 테마 지원으로 반응형입니다. HTML은 Tailwind CSS에서만 사용할 수 있습니다.

열다