Tarjeta de Listado de Propiedades - Swiss Pastel
Una tarjeta de listado de propiedades simple, limpia y receptiva con un estilo de tipografía suizo / internacional y una combinación de colores pastel, adecuada para plataformas inmobiliarias. Incluye soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto transition-colors duration-300">
<div class="relative mb-4 overflow-hidden rounded-md">
<img src="https://picsum.photos/400/250?random=10" alt="Property Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 hover:scale-105">
<div class="absolute bottom-2 left-2 bg-rose-200 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full text-xs font-semibold uppercase opacity-90">
For Sale
</div>
</div>
<h3 class="text-xl sm:text-2xl font-bold text-zinc-800 dark:text-rose-100 mb-2 truncate">
Modern City Apartment
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3 truncate">
123 Main St, Anytown, CA 90210
</p>
<div class="grid grid-cols-2 gap-y-2 text-zinc-700 dark:text-zinc-300 text-sm mb-4">
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10L6 7l9 4 6-3v11H3V10z"></path></svg>
3 Beds
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 15.3A4.5 4.5 0 0115.75 21H12a2.25 2.25 0 00-2.25 2.25h-1.5A2.25 2.25 0 016 21H3.75A2.25 2.25 0 011.5 18.75V9A2.25 2.25 0 013.75 6.75h1.5A2.25 2.25 0 007.5 4.5h9A2.25 2.25 0 0119.5 6.75h1.5A2.25 2.25 0 0122.5 9v9.75A4.5 4.5 0 0120.25 15.3z"></path></svg>
2 Baths
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12V4zm-4 4V4zm-4 4V4zm-4 4v7h16v-7c0-2-1-4-3-4H7c-2 0-3 2-3 4z"></path></svg>
1,200 sqft
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Central
</div>
</div>
<div class="flex items-center justify-between">
<p class="text-xl sm:text-2xl font-extrabold text-zinc-900 dark:text-rose-200">
$350,000
</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-rose-400 dark:bg-rose-600 text-white rounded-md hover:bg-rose-500 dark:hover:bg-rose-700 transition-colors duration-200 text-sm sm:text-base font-semibold">
Details
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path></svg>
</a>
</div>
</div>
Componentes relacionados
Exhibición de tarjetas de productos de comercio electrónico retro
Un componente de visualización de productos de comercio electrónico complejo y receptivo con una estética retro / vintage de los años 80 / 90, con un esquema de color púrpura / violeta, elementos interactivos y soporte de modo oscuro.
Componente de visualización de contenido
Un componente de visualización de contenido responsivo con estilo Glassmorphism, con fondo borroso y elementos translúcidos con soporte para el modo oscuro.
Divertida pantalla de contenido fotográfico en tono joya
Un componente de visualización de contenido complejo, lúdico y divertido para un portafolio o galería de fotografía, con tonos joya brillantes, elementos redondeados y un diseño receptivo con soporte para modo oscuro. Muestra múltiples elementos interactivos como imágenes destacadas, diseños de cuadrícula y secciones de perfil.