3D_Vibrant_Simple_Social_Carousel

<div class="relative w-full max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-teal-950 rounded-lg shadow-xl overflow-hidden">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-purple-800 dark:text-purple-300 mb-8 drop-shadow-md">What's Happening?</h2>

  <!-- Carousel Container (simplified for static HTML, typically JS driven) -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 transform perspective-1000">

    <!-- Card 1 -->
    <div class="col-span-1 transform rotateY-10 scale-95 md:hover:rotateY-0 md:hover:scale-100 transition-all duration-500 ease-in-out bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 border-b-4 border-l-2 border-purple-500 dark:border-purple-700 flex flex-col justify-between overflow-hidden relative cursor-pointer group">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400/20 to-pink-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></div>
      <div class="flex items-center mb-4 z-10">
        <img class="w-12 h-12 rounded-full ring-2 ring-purple-400 dark:ring-purple-600 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-lg text-purple-700 dark:text-purple-300">Alice Johnson</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">@alice_j</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4 z-10">"Just launched my new project! Super excited for feedback. 🎉 Check it out!"</p>
      <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md z-10" src="https://picsum.photos/id/1025/400/250" alt="Post Image">
      <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm z-10">
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 12K Likes</span>
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.88 8.88 0 01-4-1l-3 1 1-3a8.88 8.88 0 01-1-4c0-3.866 3.582-7 8-7s8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg> 345 Comments</span>
      </div>
    </div>

    <!-- Card 2 (Center) -->
    <div class="col-span-1 transform scale-105 md:hover:scale-110 md:hover:rotateY-0 transition-all duration-500 ease-in-out z-20 bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 border-b-4 border-l-2 border-teal-500 dark:border-teal-700 flex flex-col justify-between overflow-hidden relative cursor-pointer group">
      <div class="absolute inset-0 bg-gradient-to-br from-teal-400/20 to-purple-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></div>
      <div class="flex items-center mb-4 z-10">
        <img class="w-12 h-12 rounded-full ring-2 ring-teal-400 dark:ring-teal-600 mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-lg text-teal-700 dark:text-teal-300">Mark Davis</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">@mark_d</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4 z-10">"Amazing sunset view from my balcony tonight! Truly breathtaking. #NatureLover"</p>
      <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md z-10" src="https://picsum.photos/id/1016/400/250" alt="Post Image">
      <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm z-10">
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 2.5K Likes</span>
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.88 8.88 0 01-4-1l-3 1 1-3a8.88 8.88 0 01-1-4c0-3.866 3.582-7 8-7s8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg> 88 Comments</span>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="col-span-1 transform -rotateY-10 scale-95 md:hover:rotateY-0 md:hover:scale-100 transition-all duration-500 ease-in-out bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 border-b-4 border-l-2 border-pink-500 dark:border-pink-700 flex flex-col justify-between overflow-hidden relative cursor-pointer group">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-400/20 to-teal-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></div>
      <div class="flex items-center mb-4 z-10">
        <img class="w-12 h-12 rounded-full ring-2 ring-pink-400 dark:ring-pink-600 mr-4" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-lg text-pink-700 dark:text-pink-300">Sophia Lee</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">@sophia_l</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4 z-10">"Enjoying a perfect cup of coffee with a good book. Simple pleasures! ☕📚"</p>
      <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md z-10" src="https://picsum.photos/id/1084/400/250" alt="Post Image">
      <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm z-10">
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 987 Likes</span>
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.88 8.88 0 01-4-1l-3 1 1-3a8.88 8.88 0 01-1-4c0-3.866 3.582-7 8-7s8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg> 210 Comments</span>
      </div>
    </div>

  </div>

  <!-- Navigation (can be added with JS for actual carousel functionality) -->
  <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
    <div class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400 shadow-md"></div>
    <div class="w-3 h-3 rounded-full bg-pink-400 dark:bg-pink-500 opacity-60"></div>
    <div class="w-3 h-3 rounded-full bg-teal-400 dark:bg-teal-500 opacity-60"></div>
  </div>

  <!-- Subtle 3D background elements -->
  <div class="absolute top-0 left-0 w-32 h-32 bg-purple-400/20 dark:bg-purple-600/30 rounded-full blur-xl -translate-x-1/4 -translate-y-1/4"></div>
  <div class="absolute bottom-0 right-0 w-48 h-48 bg-pink-400/20 dark:bg-pink-600/30 rounded-full blur-xl translate-x-1/4 translate-y-1/4"></div>
</div>