Real Estate Gallery Component
A responsive and professional gallery component for real estate listings, featuring a clean layout, pastel color scheme, and full dark mode support. Includes property cards with details, a filter/sort section, and a clear call to action.
HTML Code
<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">Related Components
Minimalist Gallery Component
A responsive and minimalist image gallery component with a sunset/warm color scheme, suitable for technology/SaaS applications. Includes dark mode support.
Minimalist Sepia Image Gallery for Reservations
A minimalist and flat design image gallery component with warm sepia/brown tones, suitable for booking and reservation systems. It features responsive design and dark mode support.
Gallery Component
A responsive gallery component using Tailwind CSS with Skeuomorphism design, Pastel color scheme, and moderate complexity for social media purposes. Includes dark mode support and uses picsum.photos for images and randomuser.me for avatars.