企业 3D 三元模态

<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center dark:bg-gray-900 dark:bg-opacity-70">
  <div class="relative p-8 bg-white dark:bg-gray-800 w-full max-w-md mx-auto rounded-3xl shadow-2xl transform transition-all duration-300 ease-in-out scale-100 opacity-100 rotate-x-0 group-hover:scale-105 group-hover:opacity-95 group-hover:rotate-x-3d-effect" style="transform-style: preserve-3d; transition: transform 0.6s ease; perspective: 1000px;">
    <!-- 3D depth effect for modal container -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700 opacity-20 rounded-3xl" style="transform: translateZ(-20px);"></div>
    
    <div class="relative z-10">
      <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-wide">
        <span class="inline-block" style="transform: translateZ(20px);">Welcome</span> 
        <span class="inline-block" style="transform: translateZ(10px);">to</span> 
        <span class="inline-block" style="transform: translateZ(0px);">Our Business</span>
      </h3>
      <div class="flex flex-col items-center mb-6">
        <img class="w-24 h-24 rounded-full border-4 border-blue-400 dark:border-blue-600 mb-4 shadow-lg" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="transform: translateZ(15px);">
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed text-center" style="transform: translateZ(5px);">
          Thank you for visiting. Explore our services and discover how we can help your business grow.
        </p>
      </div>
      <div class="grid grid-cols-2 gap-4 mb-6" style="transform: translateZ(10px);">
        <div class="text-center p-3 bg-blue-100 dark:bg-blue-900 rounded-lg shadow-md">
          <p class="text-blue-700 dark:text-blue-300 font-semibold text-lg">Solutions</p>
        </div>
        <div class="text-center p-3 bg-purple-100 dark:bg-purple-900 rounded-lg shadow-md">
          <p class="text-purple-700 dark:text-purple-300 font-semibold text-lg">Innovation</p>
        </div>
        <div class="col-span-2 text-center p-3 bg-pink-100 dark:bg-pink-900 rounded-lg shadow-md">
          <p class="text-pink-700 dark:text-pink-300 font-semibold text-lg">Growth</p>
        </div>
      </div>
      <div class="flex justify-end space-x-4">
        <button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white dark:from-blue-700 dark:to-purple-700 dark:text-gray-100 py-3 px-6 rounded-full font-bold shadow-lg transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(10px);">
          Learn More
        </button>
        <button class="bg-gray-300 text-gray-800 dark:bg-gray-600 dark:text-gray-200 py-3 px-6 rounded-full font-semibold shadow-md transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(5px);">
          Close
        </button>
      </div>
    </div>
  </div>
</div>