이미지 라이트박스 구성 요소
스큐어모픽 요소와 파스텔 색상 구성표로 설계된 복잡한 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">
×
</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>관련 구성 요소
사이버펑크 농업 이미지 라이트박스
사이버펑크 미학이 가미된 복잡하고 반응형이 빠른 이미지 라이트박스 구성 요소로, 자주색/보라색 색 구성표를 특징으로 하며 농업 및 농업 웹사이트를 위해 설계되었습니다. 다크 모드를 지원하며 제목, 설명 및 기본 메타데이터와 함께 이미지를 표시합니다.
이미지 라이트박스 구성 요소
다크 모드를 지원하는 반응형 이미지 라이트박스 구성 요소입니다. 이 구성 요소는 이미지 갤러리를 표시하고, 이미지를 클릭하면 탐색 화살표가 있는 전체 화면 모달이 열려 이미지를 탐색할 수 있습니다. 닫기 버튼이 있으며 대화형 요소를 강조하기 위해 생생한 색상을 사용합니다. 디자인은 비즈니스/기업 컨텍스트에 맞게 조정되어 전문적이면서도 매력적인 사용자 경험을 보장합니다.