3D_Real_Estate_Tooltip
Il s’agit d’un composant d’info-bulle modérément complexe et réactif avec des éléments de conception 3D et une palette de couleurs chaudes de coucher de soleil, adapté aux annonces immobilières. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
<div class="relative group w-full max-w-sm mx-auto perspective-1000">
<!-- Tooltip Trigger (Simulated 3D Card) -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden
transform-gpu transition-all duration-300 ease-in-out
group-hover:rotate-x-3 group-hover:rotate-y-3
group-hover:scale-105 group-hover:-translate-y-2
group-hover:shadow-3xl-lg
border border-solid border-orange-200 dark:border-gray-700
active:scale-100 active:rotate-0 active:translate-y-0
cursor-pointer
p-4 sm:p-6">
<div class="flex items-center space-x-4 mb-4">
<img src="https://picsum.photos/60/60?random=1" alt="Property Thumbnail" class="w-16 h-16 rounded-lg object-cover shadow-md">
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white capitalize">Luxury Villa</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Miami Beach, FL</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-2">
Stunning beachfront property with panoramic ocean views and private pool.
Ideal for luxurious living or investment.
</p>
<div class="flex justify-between items-center text-sm font-medium">
<span class="text-orange-600 dark:text-orange-400">$2.5M</span>
<button class="px-4 py-2 bg-orange-500 text-white rounded-lg shadow-md
hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50
dark:bg-orange-700 dark:hover:bg-orange-600">View Details</button>
</div>
<!-- Floating Action Button (Simulated) -->
<div class="absolute -bottom-4 -right-4 w-12 h-12 flex items-center justify-center
bg-gradient-to-br from-orange-400 to-red-500 text-white
rounded-full shadow-lg transform-gpu transition-all duration-300 ease-in-out
group-hover:scale-125 group-hover:rotate-12 group-hover:shadow-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
</div>
</div>
<!-- Tooltip Content -->
<div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible
absolute bottom-[calc(100%+15px)] left-1/2 -translate-x-1/2
transform-gpu transition-all duration-300 ease-in-out
group-hover:-translate-y-0 group-hover:scale-100 group-hover:translate-z-50
select-none
w-[calc(100%+40px)] sm:w-[calc(100%+60px)] p-4 sm:p-5
bg-gradient-to-br from-orange-400 to-red-500 dark:from-orange-700 dark:to-red-800
rounded-xl shadow-2xl z-10
border-4 border-solid border-white/50 dark:border-gray-700/50
before:content-[''] before:absolute before:bottom-[-8px] before:left-1/2
before:-translate-x-1/2 before:w-0 before:h-0
before:border-l-[12px] before:border-l-transparent
before:border-r-[12px] before:border-r-transparent
before:border-t-[12px] before:border-t-orange-400 dark:before:border-t-orange-700">
<h4 class="text-white text-lg font-bold mb-2 flex items-center justify-between">
Property Highlights
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2-2m2 2l-2 2M15 9V4a2 2 0 00-2-2H6a2 2 0 00-2 2v7.586a1 1 0 01-.293.707l-2.414 2.414A1 1 0 003 16h.01L5 16h2a1 1 0 011 1v4a1 1 0 01-1 1H3a1 1 0 01-1-1v-4a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 000 13V6a2 2 0 012-2h10a2 2 0 012 2v1" />
</svg>
</h4>
<ul class="text-white/90 text-sm space-y-1 mb-3">
<li class="flex items-center">
<svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" 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="M5 13l4 4L19 7"></path></svg>
5 Beds, 6 Baths
</li>
<li class="flex items-center">
<svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" 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="M5 13l4 4L19 7"></path></svg>
5,200 sqft
</li>
<li class="flex items-center">
<svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" 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="M5 13l4 4L19 7"></path></svg>
Oceanfront Lot
</li>
</ul>
<div class="flex items-center text-sm mb-2 opacity-90">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Agent Avatar" class="w-8 h-8 rounded-full border-2 border-white/70 shadow-md mr-2">
<span class="font-medium text-white">Contact Agent:</span>
<a href="#" class="ml-2 text-white underline hover:opacity-80 transition-opacity">John Doe</a>
</div>
<div class="text-right">
<button class="px-3 py-1 bg-white bg-opacity-20 text-white rounded-md text-xs
hover:bg-opacity-30 transition-colors focus:outline-none focus:ring-1 focus:ring-white focus:ring-opacity-70">
See More Images
</button>
</div>
</div>
</div>
</div>
<style>
/* Adding custom perspective for the 3D effect without needing a parent container */
.perspective-1000 {
perspective: 1000px;
}
/* Custom shadow for a more pronounced 3D effect on hover */
.shadow-3xl-lg {
box-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.4), 0 10px 10px -5px rgba(249, 115, 22, 0.2), 0 0 0 1px rgba(249, 115, 22, 0.1);
}
.dark .shadow-3xl-lg {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
}
/* Translate-z for 3D effect, works with perspective */
.group-hover\:translate-z-50 {
transform: translateZ(50px);
}
/* Ensures the pseudo-element pointer also has a border */
.before\:border-t-orange-400 {
border-top-color: var(--tw-gradient-from);
}
.dark .before\:border-t-orange-700 {
border-top-color: var(--tw-gradient-from);
}
</style>Composants associés
Composant d’info-bulle
Un composant d’infobulle réactif sur le thème de l’obscurité, faisant partie d’un schéma de couleurs triadique, adapté à un portfolio. Construit avec Tailwind CSS pour une esthétique simple et minimale.
Infobulle pastel minimaliste
Un composant d’info-bulle minimal et plat conçu pour les sites Web d’entreprise et d’entreprise avec des couleurs pastel, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant d’info-bulle Micro-interactions
Un composant d’info-bulle simple mais attrayant avec des animations de micro-interaction subtiles, un design réactif et une prise en charge du thème sombre construit avec Tailwind CSS. Aucun JavaScript n’est requis.