3D_Real_Estate_Tooltip

<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>