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의 dark: 접두사를 사용하여 어두운 테마를 지원하며 JavaScript가 필요하지 않습니다. 이미지의 출처는 picsum.photos입니다.

열다

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

미니멀리스트 이미지 라이트박스 컴포넌트는 반응형 디자인과 대시보드 목적을 위한 어두운 테마를 지원합니다. 이미지에 picsum.photos를 사용합니다.

열다

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

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

열다