레트로 갤러리 컴포넌트
레트로/빈티지 스타일, 생생한 색 구성표, 블로그/콘텐츠 소비를 위한 간단한 레이아웃을 갖춘 반응형 갤러리 구성 요소이며 다크 모드를 지원합니다. Tailwind CSS를 사용합니다.
HTML 코드
<div class="bg-gray-200 dark:bg-gray-800 p-6"> <div class="container mx-auto"> <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Gallery</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro1/500/300" alt="Gallery Image 1" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 1</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro2/500/300" alt="Gallery Image 2" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 2</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro3/500/300" alt="Gallery Image 3" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 3</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div></div>관련 구성 요소
Real Estate Gallery 구성 요소
부동산 목록을 위한 반응형이고 전문적인 갤러리 구성 요소로, 깔끔한 레이아웃, 파스텔 색상 구성표 및 완전한 다크 모드 지원을 특징으로 합니다. 세부 정보가 포함된 속성 카드, 필터/정렬 섹션 및 명확한 클릭 유도문안이 포함됩니다.
예약을 위한 미니멀리스트 세피아 이미지 갤러리
따뜻한 세피아/브라운 톤의 미니멀하고 평평한 디자인의 이미지 갤러리 구성 요소로, 예약 및 예약 시스템에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.
미니멀리스트 갤러리 구성 요소
일몰/따뜻한 색 구성표가 있는 반응형 미니멀리스트 이미지 갤러리 구성 요소로, 기술/SaaS 애플리케이션에 적합합니다. 다크 모드 지원이 포함됩니다.