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

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

전자 상거래 웹 사이트를 위해 설계된 간단한 반응형 이미지 라이트박스 구성 요소로, 다크 모드 스타일과 유사한 색 구성표를 특징으로 합니다.

미리 보기

HTML 코드 

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 dark:bg-gray-800 z-50">
    <div class="relative w-full max-w-2xl">
        <button class="absolute top-0 right-0 p-2 text-white hover:bg-gray-700 dark:hover:bg-gray-600 rounded-full focus:outline-none" aria-label="Close">
            &times;
        </button>
        <img src="https://picsum.photos/800/600" alt="Product Image" class="w-full h-auto rounded-lg shadow-lg">
        <div class="flex justify-between mt-4">
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
        </div>
    </div>
</div>

관련 구성 요소

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

소셜 미디어용 오션/블루 톤의 단순하고 반응형이 빠른 글래스모피즘 스타일의 이미지 라이트박스 구성 요소로, 다크 모드를 지원합니다.

열다

Glassmorphism 부동산을 위한 세피아 톤의 라이트박스

글래스모피즘 디자인의 반응형 이미지 라이트박스 구성 요소로, 젖빛 유리와 같은 반투명 요소와 세피아/갈색 색조를 특징으로 하여 부동산 부동산 이미지 갤러리에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

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

모노스페이스/개발자 디자인, 레트로/빈티지 색 구성표, 암호화폐/블록체인 미학을 갖춘 반응형 이미지 라이트박스 구성 요소입니다. 탐색 컨트롤, 이미지 설명 및 다크 모드 지원 기능이 있습니다.

열다