Real Estate Gallery 구성 요소
부동산 목록을 위한 반응형이고 전문적인 갤러리 구성 요소로, 깔끔한 레이아웃, 파스텔 색상 구성표 및 완전한 다크 모드 지원을 특징으로 합니다. 세부 정보가 포함된 속성 카드, 필터/정렬 섹션 및 명확한 클릭 유도문안이 포함됩니다.
HTML 코드
<div class="bg-blue-50 dark:bg-gray-900 py-8 lg:py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-200 mb-4">Premium Property Listings</h2>
<p class="text-lg text-blue-700 dark:text-blue-300 max-w-2xl mx-auto">Explore our wide selection of exquisite properties, meticulously curated to meet your highest standards.</p>
</div>
<!-- Filters & Sort -->
<div class="flex flex-col sm:flex-row items-center justify-between mb-8 space-y-4 sm:space-y-0 sm:space-x-4">
<div class="relative w-full sm:w-auto">
<select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
<option>All Locations</option>
<option>New York</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
<div class="relative w-full sm:w-auto">
<select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
<option>All Types</option>
<option>House</option>
<option>Apartment</option>
<option>Condo</option>
<option>Land</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"/></svg>
</div>
</div>
<div class="relative w-full sm:w-auto">
<select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
<option>Sort by: Newest</option>
<option>Sort by: Price (Low to High)</option>
<option>Sort by: Price (High to Low)</option>
<option>Sort by: Popularity</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
</div>
<!-- Property Grid -->
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Property Card 1 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
<img src="https://picsum.photos/id/10/400/300" alt="Modern Home" class="w-full h-48 object-cover">
<div class="p-5">
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Spacious Family Home</h3>
<p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>123 Grand Ave, City, State</p>
<div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
<p class="mr-4"><i class="fas fa-bed mr-1"></i> 4 Beds</p>
<p class="mr-4"><i class="fas fa-bath mr-1"></i> 3 Baths</p>
<p><i class="fas fa-ruler-combined mr-1"></i> 2400 SqFt</p>
</div>
<p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$750,000</p>
<a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
View Details
</a>
</div>
</article>
<!-- Property Card 2 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
<img src="https://picsum.photos/id/20/400/300" alt="Luxury Apartment" class="w-full h-48 object-cover">
<div class="p-5">
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Downtown Loft Apartment</h3>
<p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>456 High St, City, State</p>
<div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
<p class="mr-4"><i class="fas fa-bed mr-1"></i> 2 Beds</p>
<p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
<p><i class="fas fa-ruler-combined mr-1"></i> 1100 SqFt</p>
</div>
<p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$480,000</p>
<a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
View Details
</a>
</div>
</article>
<!-- Property Card 3 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
<img src="https://picsum.photos/id/30/400/300" alt="Suburban House" class="w-full h-48 object-cover">
<div class="p-5">
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Charming Suburban Home</h3>
<p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>789 Oak Ln, City, State</p>
<div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
<p class="mr-4"><i class="fas fa-bed mr-1"></i> 3 Beds</p>
<p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
<p><i class="fas fa-ruler-combined mr-1"></i> 1800 SqFt</p>
</div>
<p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$595,000</p>
<a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
View Details
</a>
</div>
</article>
<!-- Property Card 4 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
<img src="https://picsum.photos/id/40/400/300" alt="Waterfront Villa" class="w-full h-48 object-cover">
<div class="p-5">
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Stunning Waterfront Villa</h3>
<p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>101 Bay View, City, State</p>
<div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
<p class="mr-4"><i class="fas fa-bed mr-1"></i> 5 Beds</p>
<p class="mr-4"><i class="fas fa-bath mr-1"></i> 4 Baths</p>
<p><i class="fas fa-ruler-combined mr-1"></i> 3200 SqFt</p>
</div>
<p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$1,200,000</p>
<a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
View Details
</a>
</div>
</article>
<!-- Property Card 5 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
<img src="https://picsum.photos/id/50/400/300" alt="Cozy Condo" class="w-full h-48 object-cover">
<div class="p-5">
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Cozy City Center Condo</h3>
<p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>202 Metro Blvd, City, State</p>
<div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
<p class="mr-4"><i class="fas fa-bed mr-1"></i> 1 Bed</p>
<p class="mr-4"><i class="fas fa-bath mr-1"></i> 1 Bath</p>
<p><i class="fas fa-ruler-combined mr-1"></i> 750 SqFt</p>
</div>
<p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$320,000</p>
<a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
View Details
</a>
</div>
</article>
<!-- Property Card 6 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
<img src="https://picsum.photos/id/60/400/300" alt="Rural Estate" class="w-full h-48 object-cover">
<div class="p-5">
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Expansive Rural Estate</h3>
<p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>303 Country Rd, City, State</p>
<div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
<p class="mr-4"><i class="fas fa-bed mr-1"></i> 6 Beds</p>
<p class="mr-4"><i class="fas fa-bath mr-1"></i> 5 Baths</p>
<p><i class="fas fa-ruler-combined mr-1"></i> 4500 SqFt</p>
</div>
<p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$1,800,000</p>
<a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
View Details
</a>
</div>
</article>
<!-- Property Card 7 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
<img src="https://picsum.photos/id/70/400/300" alt="Newly Built" class="w-full h-48 object-cover">
<div class="p-5">
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Brand New Modern Build</h3>
<p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>404 Innovation Dr, City, State</p>
<div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
<p class="mr-4"><i class="fas fa-bed mr-1"></i> 4 Beds</p>
<p class="mr-4"><i class="fas fa-bath mr-1"></i> 3 Baths</p>
<p><i class="fas fa-ruler-combined mr-1"></i> 2800 SqFt</p>
</div>
<p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$890,000</p>
<a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
View Details
</a>
</div>
</article>
<!-- Property Card 8 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
<img src="https://picsum.photos/id/80/400/300" alt="Renovated Charm" class="w-full h-48 object-cover">
<div class="p-5">
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Historic Fully Renovated</h3>
<p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>505 Heritage Pkwy, City, State</p>
<div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
<p class="mr-4"><i class="fas fa-bed mr-1"></i> 3 Beds</p>
<p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
<p><i class="fas fa-ruler-combined mr-1"></i> 1600 SqFt</p>
</div>
<p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$620,000</p>
<a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
View Details
</a>
</div>
</article>
</div>
<!-- Pagination (optional, but good for complex components) -->
<div class="flex justify-center mt-10">
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="z-10 bg-blue-100 dark:bg-blue-700 border-blue-500 text-blue-600 dark:text-blue-100 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
2
</a>
<a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300">
...
</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
10
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
<!-- Font Awesome for icons (optional, but used in the example) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">