Cyberpunk_Real_Estate_Lightbox
Un composant de lightbox d’image simple et réactif avec une palette de couleurs sourdes inspirée du cyberpunk, adapté aux annonces immobilières. Prend en charge le mode sombre et utilise le HTML sémantique.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-950 dark:bg-zinc-950 p-4 font-mono antialiased">
<!-- Image Lightbox Component -->
<div class="relative w-full max-w-lg mx-auto bg-gray-900 dark:bg-zinc-900 rounded-lg shadow-lg shadow-indigo-900/40 border border-purple-800 dark:border-indigo-800 overflow-hidden group">
<!-- Main Image (Placeholder) -->
<img src="https://picsum.photos/800/600?random=1" alt="Property Image" class="w-full h-80 object-cover object-center rounded-t-lg group-hover:opacity-75 transition-opacity duration-300">
<!-- Overlay for Lightbox interaction -->
<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer" aria-hidden="true">
<button type="button" class="text-purple-400 dark:text-indigo-400 text-3xl p-4 rounded-full bg-slate-900/60 hover:bg-slate-800/80 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-indigo-600 transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
</svg>
<span class="sr-only">View Larger</span>
</button>
</div>
<!-- Property Details (Minimal) -->
<div class="p-4">
<h3 class="text-xl font-semibold text-purple-300 dark:text-indigo-300 mb-2">Urban Loft 789</h3>
<p class="text-sm text-gray-400 dark:text-zinc-400 mb-3">District A9, Neo-Kyoto City</p>
<div class="flex items-center justify-between text-base text-purple-400 dark:text-indigo-400">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-purple-600 dark:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L22 21M7.273 6.343L2 2" />
</svg>
3 Beds
</span>
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-purple-600 dark:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
</svg>
2 Baths
</span>
</div>
</div>
</div>
</div>Composants associés
Composant Lightbox d’image
Un composant de lightbox d’image réactif conçu pour les tableaux de bord, avec un style 3D et une palette de couleurs monochromatiques. Il comprend des effets de survol et une fonctionnalité modale utilisant Tailwind CSS pour la prise en charge du mode sombre.
Composant Lightbox d’image
Un composant de visionneuse d’images ludique et amusant pour les outils CRM/Business, avec une palette de couleurs en niveaux de gris, des éléments arrondis et une interface complexe pour la visualisation interactive des images. Entièrement réactif avec prise en charge du mode sombre.
Composant Lightbox d’image
Un composant de lightbox d’image réactif avec un design Skeuomorphism, des couleurs vives et la prise en charge du mode sombre, construit avec Tailwind CSS. Pas de JavaScript pour des performances améliorées.