Wishlist Component

<div class="p-4 sm:p-6 md:p-8 bg-blue-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform perspective-1000 rotateY-3 transition-transform duration-500 ease-in-out hover:rotateY-0 group">
    <!-- Front face with shadow for 3D effect -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-blue-500 to-blue-700 dark:from-blue-700 dark:via-blue-900 dark:to-blue-950 opacity-10 group-hover:opacity-0 transition-opacity duration-300 ease-in-out rounded-xl origin-bottom-right rotate-3 transform translateZ-neg10 rotate-y-3">
    </div>
    <div class="relative z-10 p-6 sm:p-8 rounded-xl">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-200">Your Wishlist</h3>
        <button class="p-2 rounded-full bg-blue-100 hover:bg-blue-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-blue-600 dark:text-gray-300 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          <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="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
        </button>
      </div>

      <ul class="space-y-4">
        <!-- Wishlist Item 1 -->
        <li class="flex items-center space-x-4 p-3 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transform hover:scale-105 transition duration-300 ease-in-out border border-blue-200 dark:border-gray-600 group">
          <div class="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 border-2 border-blue-400 dark:border-blue-500">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover transform scale-105 group-hover:scale-110 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-transparent to-transparent opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
          </div>
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-blue-700 dark:text-blue-300">Jane Doe</h4>
            <p class="text-sm text-gray-500 dark:text-gray-400">Loves hiking & coffee</p>
          </div>
          <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 transition duration-300 ease-in-out p-1 rounded-full hover:bg-red-100 dark:hover:bg-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </li>

        <!-- Wishlist Item 2 -->
        <li class="flex items-center space-x-4 p-3 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transform hover:scale-105 transition duration-300 ease-in-out border border-blue-200 dark:border-gray-600 group">
          <div class="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 border-2 border-blue-400 dark:border-blue-500">
            <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar" class="w-full h-full object-cover transform scale-105 group-hover:scale-110 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-transparent to-transparent opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
          </div>
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-blue-700 dark:text-blue-300">John Smith</h4>
            <p class="text-sm text-gray-500 dark:text-gray-400">Gamer & foodie</p>
          </div>
          <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 transition duration-300 ease-in-out p-1 rounded-full hover:bg-red-100 dark:hover:bg-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </li>

        <!-- Wishlist Item 3 -->
        <li class="flex items-center space-x-4 p-3 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transform hover:scale-105 transition duration-300 ease-in-out border border-blue-200 dark:border-gray-600 group">
          <div class="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 border-2 border-blue-400 dark:border-blue-500">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full object-cover transform scale-105 group-hover:scale-110 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-transparent to-transparent opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
          </div>
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-blue-700 dark:text-blue-300">Alice Brown</h4>
            <p class="text-sm text-gray-500 dark:text-gray-400">Artist & Traveler</p>
          </div>
          <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 transition duration-300 ease-in-out p-1 rounded-full hover:bg-red-100 dark:hover:bg-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </li>
      </ul>
      
      <div class="mt-6 text-center">
        <button class="w-full py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-lg shadow-md hover:shadow-lg transform active:scale-95 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
          Suggest New Matches
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for basic 3D transform, consider using Tailwind's arbitrary values or JIT */
  .perspective-1000 {
    perspective: 1000px;
  }
  .rotateY-3 {
    transform: rotateY(3deg);
  }
  .rotateY-0 {
    transform: rotateY(0deg);
  }
  .translateZ-neg10 {
    transform: translateZ(-10px);
  }
</style>