Skeuomorphic_Dating_Carousel

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-300 via-pink-300 to-red-300 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 p-4 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl border-4 border-gray-200 dark:border-gray-700 overflow-hidden" style="box-shadow: inset 0px 4px 8px rgba(0,0,0,0.1), inset 0px -4px 8px rgba(255,255,255,0.7), 0px 10px 20px rgba(0,0,0,0.2);">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-tight" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.6), -1px -1px 2px rgba(0,0,0,0.2);">
        Find Your Match
      </h2>

      <!-- Carousel Item (static for this HTML-only example, would be dynamic with JS) -->
      <div class="flex flex-col items-center text-center">
        <div class="relative w-48 h-48 sm:w-64 sm:h-64 md:w-72 md:h-72 rounded-full overflow-hidden mb-6 filter drop-shadow-lg" style="box-shadow: inset 0px 2px 4px rgba(0,0,0,0.1), inset 0px -2px 4px rgba(255,255,255,0.7), 0px 6px 12px rgba(0,0,0,0.2);">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover border-4 border-white dark:border-gray-800 rounded-full grayscale hover:grayscale-0 transition-all duration-300 ease-in-out">
          <div class="absolute inset-0 rounded-full border-4 border-purple-400 dark:border-purple-600 animate-pulse" style="filter: blur(2px);"></div>
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.4), -1px -1px 2px rgba(0,0,0,0.1);">
          Jessica, 28
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 mb-4 px-4">
          Passionate traveler, dog lover, and always up for an adventure! Looking for someone to share laughs with.
        </p>
      </div>

      <!-- Navigation Buttons (skeuomorphic design) -->
      <div class="flex justify-between items-center mt-8 px-4" role="group" aria-label="Carousel Navigation">
        <button class="relative p-3 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-700 dark:text-gray-200 shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
          <span class="sr-only">Previous Profile</span>
        </button>

        <button class="relative p-3 rounded-full bg-gradient-to-br from-green-300 to-green-500 dark:from-green-600 dark:to-green-800 text-white shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" />
          </svg>
          <span class="sr-only">Add to Favorites</span>
        </button>

        <button class="relative p-3 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-700 dark:text-gray-200 shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
          <span class="sr-only">Next Profile</span>
        </button>
      </div>

      <!-- Indicators (Skeuomorphic dots) -->
      <div class="flex justify-center space-x-2 mt-8">
        <div class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-700 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
        <div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
        <div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
      </div>
    </div>
  </div>
</div>