Lista de deseos Componente Inmobiliario
Un componente de lista de deseos sensible y de alto contraste para propiedades inmobiliarias, inspirado en los principios de Material Design, con soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-10 text-center">
Your Wishlist
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
<!-- Property Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
<div class="relative pb-2/3">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Modern House With Large Windows">
<button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</button>
</div>
<div class="p-4 sm:p-5 flex flex-col flex-grow">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Luxury Villa with Ocean View</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-3">123 Ocean Blvd, Malibu, CA</p>
<div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
<span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 4 Beds</span>
<span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 3 Baths</span>
<span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 2,500 sqft</span>
</div>
<div class="mt-auto flex justify-between items-baseline pt-2">
<p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$2,500,000</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
View Details
</a>
</div>
</div>
</div>
<!-- Property Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
<div class="relative pb-2/3">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Apartment Complex with City View">
<button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</button>
</div>
<div class="p-4 sm:p-5 flex flex-col flex-grow">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Chic Downtown Loft</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-3">456 City St, New York, NY</p>
<div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
<span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Beds</span>
<span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Baths</span>
<span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 1,200 sqft</span>
</div>
<div class="mt-auto flex justify-between items-baseline pt-2">
<p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$850,000</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
View Details
</a>
</div>
</div>
</div>
<!-- Property Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
<div class="relative pb-2/3">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1025/600/400" alt="Suburban Family House">
<button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</button>
</div>
<div class="p-4 sm:p-5 flex flex-col flex-grow">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Spacious Family Home with Garden</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-3">789 Evergreen Ln, Suburbia, TX</p>
<div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
<span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 5 Beds</span>
<span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 4 Baths</span>
<span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 3,800 sqft</span>
</div>
<div class="mt-auto flex justify-between items-baseline pt-2">
<p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$650,000</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
View Details
</a>
</div>
</div>
</div>
<!-- Property Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
<div class="relative pb-2/3">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1037/600/400" alt="Small Countryside Cottage">
<button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</button>
</div>
<div class="p-4 sm:p-5 flex flex-col flex-grow">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Cozy Countryside Retreat</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-3">456 Rural Rd, Countryside, GA</p>
<div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
<span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 3 Beds</span>
<span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Baths</span>
<span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 1,800 sqft</span>
</div>
<div class="mt-auto flex justify-between items-baseline pt-2">
<p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$380,000</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
View Details
</a>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de lista de deseos
Un componente de lista de deseos al estilo Neumorphism para redes sociales, con una combinación de colores complementaria. Incluye un diseño responsivo que utiliza Tailwind CSS con soporte para modo oscuro. Solo se utilizan las clases HTML y Tailwind, sin JavaScript. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.
Componente de lista de deseos
Un componente de lista de deseos simple y receptivo con degradados de color de alto contraste y transiciones suaves, adecuado para sitios web comerciales / corporativos. Incluye soporte para modo oscuro.
Componente de lista de deseos
Un componente de lista de deseos simple y receptivo para sitios web comerciales / corporativos con microinteracciones. Cuenta con un esquema de color análogo (azul-verde-verde azulado), soporte de tema oscuro y sutiles animaciones de desplazamiento. El componente muestra los elementos de la lista de deseos con imágenes de productos, nombres, precios y botones de acción.