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

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

전자상거래용으로 설계된 반응형 이미지 라이트박스 구성요소로, 다크 모드 지원과 어스 톤 색상 구성표가 특징입니다.

미리 보기

HTML 코드 

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 hidden dark:block" id="lightbox">
    <div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <button class="absolute top-3 right-3 text-white focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">&times;</button>
        <img class="w-full h-auto" src="https://picsum.photos/800/600" alt="Product Image">
        <div class="p-4">
            <div class="flex items-center space-x-3">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="text-white">
                    <p class="text-sm font-semibold">John Doe</p>
                    <p class="text-xs text-gray-400">E-commerce Store</p>
                </div>
            </div>
            <p class="mt-2 text-xs text-gray-300">Image description or product details can go here.</p>
        </div>
    </div>
</div>

<div class="flex justify-center py-6">
    <button class="bg-green-600 text-white py-2 px-4 rounded-lg focus:outline-none hover:bg-green-500" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        Open Lightbox
    </button>
</div>

관련 구성 요소

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

블로그 또는 콘텐츠 플랫폼에 적합한 브루탈리즘 스타일의 이미지 라이트박스 구성 요소로, 흙색과 복잡한 인터랙티브 요소로 디자인되었습니다.

열다

Memphis_Monochrome_Image_Lightbox

멤피스 디자인(Memphis Design)의 영향을 받은 단순하고 반응이 빠른 이미지 라이트박스 컴포넌트로, 하나의 밝은 액센트 컬러가 있는 모노크롬 팔레트가 특징입니다. 직업/경력 플랫폼용으로 설계되었습니다.

열다

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

브루탈리즘 스타일로 디자인된 복잡한 이미지 라이트박스 컴포넌트로, 소셜 미디어 인터페이스에 적합하며, 그레이스케일 색 구성표와 다크 모드 지원을 위한 고대비가 특징입니다.

열다