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를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

열다

직업/경력 플랫폼을 위한 Image Lightbox 구성 요소

스위스 디자인의 영향과 파란색 색 구성표가 있는 깨끗하고 미니멀한 이미지 라이트박스 구성 요소로 구인 게시판 또는 경력 플랫폼에 적합합니다. 응답성과 다크 모드를 지원하여 사용자가 오버레이된 팝업에서 이미지를 볼 수 있습니다.

열다

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

Tailwind CSS를 사용하여 Glassmorphism 스타일로 디자인된 반응형 이미지 라이트박스 구성 요소입니다. 이 구성 요소는 젖빛 유리와 같은 반투명 요소와 흐림 효과가 있는 어두운 테마를 지원합니다.

열다