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

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

스큐어모픽 요소와 파스텔 색상 구성표로 설계된 복잡한 Image Lightbox 구성 요소로, 대시보드 환경에 적합합니다. 여기에는 반응형 레이아웃, 어두운 테마 지원 및 대화형 인터페이스가 포함됩니다.

미리 보기

HTML 코드 

<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-75 dark:bg-black">
    <div class="bg-gradient-to-br from-pink-300 to-blue-300 rounded-xl shadow-xl p-5 w-full max-w-3xl relative">
        <button class="absolute top-2 right-2 text-gray-700 dark:text-gray-300 font-bold text-lg hover:text-gray-900 dark:hover:text-white transition">
            &times;
        </button>
        <div class="flex justify-center mb-5">
            <img src="https://picsum.photos/600/400" alt="Lightbox Image" class="rounded-lg shadow-lg max-w-full h-auto brightness-90 dark:brightness-75">
        </div>
        <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/200/150?random=1" alt="Thumbnail 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=2" alt="Thumbnail 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=3" alt="Thumbnail 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=4" alt="Thumbnail 4" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=5" alt="Thumbnail 5" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=6" alt="Thumbnail 6" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
        </div>
        <div class="flex justify-between items-center mt-5">
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Previous</button>
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Next</button>
        </div>
    </div>
</div>

관련 구성 요소

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

'종이/인쇄물에서 영감을 받은' 디자인, 보석 색조 색 구성표 및 다크 모드를 지원하는 복잡하고 반응이 빠른 이미지 라이트박스 구성 요소로 음악/오디오 플랫폼에 적합합니다. 풍부한 대화형 요소가 특징입니다.

열다

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

다크 모드를 지원하는 반응형 이미지 라이트박스 구성 요소입니다. 이 구성 요소는 이미지 갤러리를 표시하고, 이미지를 클릭하면 탐색 화살표가 있는 전체 화면 모달이 열려 이미지를 탐색할 수 있습니다. 닫기 버튼이 있으며 대화형 요소를 강조하기 위해 생생한 색상을 사용합니다. 디자인은 비즈니스/기업 컨텍스트에 맞게 조정되어 전문적이면서도 매력적인 사용자 경험을 보장합니다.

열다

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

미니멀한 플랫 디자인 스타일로 전자상거래를 위해 설계된 반응형 이미지 라이트박스 구성 요소로, Tailwind CSS를 사용하여 밝은 테마와 어두운 테마를 지원합니다.

열다