Brutalist_RealEstate_Product_Gallery
Un componente complejo de galería de productos de estilo brutalista para listados de bienes raíces, con tonos joya, colores saturados intensos, alto contraste y compatibilidad con modo oscuro. Diseñado para mostrar detalles de la propiedad con múltiples elementos interactivos.
Código HTML
<div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 antialiased">
<!-- Section Header -->
<div class="mb-8 md:mb-12 border-b-4 border-l-4 border-emerald-700 dark:border-red-700 p-4 bg-emerald-100 dark:bg-stone-800">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold uppercase tracking-tight text-emerald-900 dark:text-red-600 mb-2 leading-none">
Hot Property Listings
</h1>
<p class="text-lg sm:text-xl md:text-2xl font-semibold text-emerald-800 dark:text-red-400">
Explore our brutalist collection of available properties.
</p>
</div>
<!-- Product Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">
<!-- Property Card 1 -->
<div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-red-700 dark:border-emerald-700 shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] dark:shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)]">
<div class="absolute top-0 left-0 bg-red-700 dark:bg-emerald-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider -translate-x-2 -translate-y-2 rotate-3 hover:rotate-0 transition-transform">FEATURED</div>
<img src="https://picsum.photos/id/1018/600/400" alt="Modern Apartment Building" class="w-full h-64 object-cover border-b-4 border-red-700 dark:border-emerald-700">
<div class="p-6">
<h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-emerald-900 dark:text-emerald-500 mb-2 border-b-2 border-red-500 pb-2">Urban Loft Residence</h2>
<p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">A striking, industrial-inspired loft in the heart of downtown. Concrete finishes and exposed ductwork provide a raw, authentic living experience.</p>
<div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
<div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">☑</span> 3 Beds</div>
<div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">☑</span> 2 Baths</div>
<div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">☑</span> 1,800 sqft</div>
<div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">☑</span> Built 1978</div>
</div>
<div class="flex items-baseline justify-between mb-6 border-t-2 border-red-500 pt-4">
<span class="text-4xl sm:text-5xl font-extrabold text-red-700 dark:text-red-400">$850K</span>
<span class="text-xl font-bold text-emerald-700 dark:text-emerald-400">Negotiable</span>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 bg-emerald-700 dark:bg-ruby-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-emerald-900 dark:hover:bg-ruby-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
View Details
</button>
<button class="flex-none bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
Call Agent
</button>
</div>
<div class="mt-6 pt-4 border-t-2 border-emerald-500 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-red-700 dark:border-slate-300 mr-3">
<div>
<p class="text-sm font-semibold text-emerald-800 dark:text-emerald-300">Agent: John Smith</p>
<p class="text-xs text-stone-600 dark:text-stone-400">Available 24/7</p>
</div>
</div>
<a href="#" class="text-sm font-bold text-emerald-700 dark:text-emerald-400 hover:underline border-b-2 border-transparent hover:border-emerald-700 dark:hover:border-emerald-400 transition-colors">Message</a>
</div>
</div>
</div>
<!-- Property Card 2 -->
<div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-emerald-700 dark:border-red-700 shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] dark:shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)]">
<div class="absolute top-0 right-0 bg-emerald-700 dark:bg-red-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider translate-x-2 -translate-y-2 -rotate-3 hover:rotate-0 transition-transform">NEW LISTING</div>
<img src="https://picsum.photos/id/1041/600/400" alt="Scenic Countryside Home" class="w-full h-64 object-cover border-b-4 border-emerald-700 dark:border-red-700">
<div class="p-6">
<h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-red-900 dark:text-red-500 mb-2 border-b-2 border-emerald-500 pb-2">Brutalist Countryside Retreat</h2>
<p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">An unapologetic concrete masterpiece nestled in serene landscapes. Stripped-back design meets rural tranquility, offering profound escapism.</p>
<div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
<div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">☑</span> 4 Beds</div>
<div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">☑</span> 3 Baths</div>
<div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">☑</span> 2,500 sqft</div>
<div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">☑</span> Built 2005</div>
</div>
<div class="flex items-baseline justify-between mb-6 border-t-2 border-emerald-500 pt-4">
<span class="text-4xl sm:text-5xl font-extrabold text-emerald-700 dark:text-emerald-400">$1.2M</span>
<span class="text-xl font-bold text-red-700 dark:text-red-400">Fixed Price</span>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
View Details
</button>
<button class="flex-none bg-emerald-700 dark:bg-ruby-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-emerald-900 dark:hover:bg-ruby-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
Call Agent
</button>
</div>
<div class="mt-6 pt-4 border-t-2 border-red-500 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-emerald-700 dark:border-slate-300 mr-3">
<div>
<p class="text-sm font-semibold text-red-800 dark:text-red-300">Agent: Jane Doe</p>
<p class="text-xs text-stone-600 dark:text-stone-400">Response time: 1hr</p>
</div>
</div>
<a href="#" class="text-sm font-bold text-red-700 dark:text-red-400 hover:underline border-b-2 border-transparent hover:border-red-700 dark:hover:border-red-400 transition-colors">Message</a>
</div>
</div>
</div>
<!-- Property Card 3 -->
<div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-sapphire-700 dark:border-emerald-700 shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] dark:shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)]">
<div class="absolute top-0 left-0 bg-sapphire-700 dark:bg-emerald-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider -translate-x-2 -translate-y-2 rotate-3 hover:rotate-0 transition-transform">PREMIUM</div>
<img src="https://picsum.photos/id/1050/600/400" alt="Commercial Space" class="w-full h-64 object-cover border-b-4 border-sapphire-700 dark:border-emerald-700">
<div class="p-6">
<h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-sapphire-900 dark:text-sapphire-500 mb-2 border-b-2 border-red-500 pb-2">Commercial Block B</h2>
<p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">A robust, imposing commercial building ready for redevelopment. Massive potential with a no-nonsense, concrete structure.</p>
<div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
<div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">☑</span> 5 Floors</div>
<div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">☑</span> 10 Offices</div>
<div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">☑</span> 10,000 sqft</div>
<div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">☑</span> Built 1960</div>
</div>
<div class="flex items-baseline justify-between mb-6 border-t-2 border-red-500 pt-4">
<span class="text-4xl sm:text-5xl font-extrabold text-red-700 dark:text-red-400">$3.5M</span>
<span class="text-xl font-bold text-sapphire-700 dark:text-sapphire-400">Offer Welcome</span>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 bg-sapphire-700 dark:bg-emerald-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-sapphire-900 dark:hover:bg-emerald-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
View Details
</button>
<button class="flex-none bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
Call Agent
</button>
</div>
<div class="mt-6 pt-4 border-t-2 border-sapphire-500 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-sapphire-700 dark:border-slate-300 mr-3">
<div>
<p class="text-sm font-semibold text-sapphire-800 dark:text-sapphire-300">Agent: Mike Ross</p>
<p class="text-xs text-stone-600 dark:text-stone-400">Key Holder</p>
</div>
</div>
<a href="#" class="text-sm font-bold text-sapphire-700 dark:text-sapphire-400 hover:underline border-b-2 border-transparent hover:border-sapphire-700 dark:hover:border-sapphire-400 transition-colors">Message</a>
</div>
</div>
</div>
</div>
<!-- Call to action/Footer space -->
<div class="mt-12 md:mt-16 text-center border-t-4 border-r-4 border-emerald-700 dark:border-red-700 p-6 bg-emerald-100 dark:bg-stone-800">
<p class="text-xl sm:text-2xl font-bold uppercase text-emerald-900 dark:text-red-500 mb-4">Ready to find your brutalist dream?</p>
<button class="inline-block bg-red-700 dark:bg-sapphire-700 text-stone-50 px-8 py-4 text-xl font-bold uppercase border-4 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)]">
Browse All Properties
</button>
</div>
<!-- Custom Colors for Brutalism Jewel Tones -->
<style>
.dark .bg-ruby-700 { background-color: rgb(150, 40, 60); } /* Darker Ruby */
.dark .hover\:bg-ruby-900:hover { background-color: rgb(110, 20, 40); } /* Even darker Ruby */
.dark .bg-sapphire-700 { background-color: rgb(60, 80, 150); } /* Darker Sapphire */
.dark .hover\:bg-sapphire-900:hover { background-color: rgb(40, 60, 110); } /* Even darker Sapphire */
.text-emerald-900 { color: rgb(0, 50, 20); } /* Darker Emerald */
.text-red-900 { color: rgb(70, 0, 0); } /* Darker Red */
.text-sapphire-900 { color: rgb(0, 0, 40); } /* Darker Sapphire */
/* Light mode custom colors */
.bg-emerald-700 { background-color: rgb(5, 150, 105); } /* Emerald Green */
.hover\:bg-emerald-900:hover { background-color: rgb(4, 120, 85); } /* Darker Emerald for hover */
.border-emerald-700 { border-color: rgb(5, 150, 105); } /* Emerald Border */
.text-emerald-700 { color: rgb(5, 150, 105); } /* Emerald Text */
.text-emerald-800 { color: rgb(4, 130, 95); } /* Slightly darker Emerald Text */
.text-emerald-900 { color: rgb(3, 100, 75); } /* Even darker Emerald Text */
.border-emerald-500 { border-color: rgb(6, 175, 125); } /* Lighter Emerald Border */
.text-emerald-400 { color: rgb(4, 185, 130); } /* Lighter Emerald Text */
.text-emerald-300 { color: rgb(5, 200, 140); } /* Even lighter Emerald Text */
.bg-red-700 { background-color: rgb(220, 38, 38); } /* Ruby Red */
.hover\:bg-red-900:hover { background-color: rgb(180, 30, 30); } /* Darker Ruby for hover */
.border-red-700 { border-color: rgb(220, 38, 38); } /* Ruby Border */
.text-red-700 { color: rgb(220, 38, 38); } /* Ruby Text */
.text-red-800 { color: rgb(190, 35, 35); } /* Slightly darker Ruby Text */
.text-red-900 { color: rgb(150, 30, 30); } /* Even darker Ruby Text */
.border-red-500 { border-color: rgb(239, 68, 68); } /* Lighter Ruby Border */
.text-red-400 { color: rgb(248, 113, 113); } /* Lighter Ruby Text */
.text-red-300 { color: rgb(252, 165, 165); } /* Even lighter Ruby Text */
.bg-sapphire-700 { background-color: rgb(37, 99, 235); } /* Sapphire Blue */
.hover\:bg-sapphire-900:hover { background-color: rgb(29, 78, 216); } /* Darker Sapphire for hover */
.border-sapphire-700 { border-color: rgb(37, 99, 235); } /* Sapphire Border */
.text-sapphire-700 { color: rgb(37, 99, 235); } /* Sapphire Text */
.text-sapphire-800 { color: rgb(30, 80, 190); } /* Slightly darker Sapphire Text */
.text-sapphire-900 { color: rgb(20, 60, 150); } /* Even darker Sapphire Text */
.border-sapphire-500 { border-color: rgb(59, 130, 246); } /* Lighter Sapphire Border */
.text-sapphire-400 { color: rgb(96, 165, 250); } /* Lighter Sapphire Text */
.text-sapphire-300 { color: rgb(147, 197, 253); } /* Even lighter Sapphire Text */
</style>
</div>Componentes relacionados
Componente de la galería de productos
Un componente de galería de productos receptivo con un diseño inspirado en el papel/impresión, una combinación de colores neutros cálidos y compatibilidad con el modo oscuro, adecuado para plataformas de entretenimiento/medios.
Componente de la galería de productos
Componente de galería de productos receptivo con soporte para modo oscuro
Componente de la galería de productos
Un componente de galería de productos simple y receptivo con un estilo de diseño de cristal, esquema de color en blanco y negro con un acento brillante, adecuado para bolsas de trabajo o plataformas profesionales. Incluye soporte para modo oscuro.