Social_Dating_Interactive_Component

<div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 font-sans">

  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:flex md:items-center transform transition-all duration-300 hover:scale-[1.01]">

    <!-- Left Section: Profile Card -->
    <div class="w-full md:w-1/3 p-6 sm:p-8 border-b md:border-b-0 md:border-r border-gray-100 dark:border-gray-700 bg-gradient-to-br from-purple-50 dark:from-purple-950 to-purple-100 dark:to-gray-900 flex flex-col items-center justify-center">
      <div class="relative w-32 h-32 rounded-full overflow-hidden mb-4 ring-4 ring-purple-400 dark:ring-purple-600 shadow-lg">
        <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/62.jpg" alt="Profile Picture">
        <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-2 border-white dark:border-gray-800 flex items-center justify-center">
          <span class="text-white text-xs font-bold">✔</span>
        </div>
      </div>
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">Sophia Miller</h2>
      <p class="text-lg text-purple-700 dark:text-purple-300 font-semibold mb-1 text-center">28, Software Engineer</p>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6 text-center">Based in New York City</p>

      <div class="flex space-x-4 mb-6">
        <button class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-600 hover:bg-purple-700 text-white transition duration-300 transform hover:scale-110 shadow-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </button>
        <button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-300 transform hover:scale-110 shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
          <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </button>
        <button class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-300 hover:bg-gray-400 text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 transition duration-300 transform hover:scale-110 shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          <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="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <div class="w-full">
        <label for="progress-match" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Compatibility Score</label>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
          <div class="bg-gradient-to-r from-purple-400 to-purple-600 h-2.5 rounded-full" style="width: 75%"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">75% Match Found</p>
      </div>

    </div>

    <!-- Right Section: Interactive Elements -->
    <div class="w-full md:w-2/3 p-6 sm:p-8 flex flex-col">
      <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Discover More About Sophia</h3>

      <!-- Interactive Tabs -->
      <div class="mb-6">
        <div class="relative flex flex-wrap gap-2 md:gap-0 bg-gray-100 dark:bg-gray-700 rounded-lg p-1 transition-colors duration-200">
          <button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 active-tab">
            About Me
          </button>
          <button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            Interests
          </button>
          <button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            Photos
          </button>
          <button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            Questions
          </button>
          <!-- Active tab indicator - controlled by JS in a real app, but for static HTML, it's just styling -->
          <style>
            .active-tab {
              background-color: var(--tw-purple-600);
              color: white;
              box-shadow: var(--tw-shadow-lg);
            }
            .dark .active-tab {
              background-color: var(--tw-purple-700);
            }
            @media (min-width: 768px) {
              .active-tab {
                background-color: var(--tw-purple-600);
                color: white;
                box-shadow: var(--tw-shadow-lg);
              }
              .dark .active-tab {
                background-color: var(--tw-purple-700);
              }
            }
          </style>
        </div>
      </div>

      <!-- Tab Content: About Me -->
      <div class="flex-grow mb-6">
        <h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-3">Bio</h4>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
          Passionate software engineer building scalable applications. Love exploring new technologies, hiking,
          and discovering hidden gems in the city. Looking for someone who shares my curiosity and sense of adventure.
        </p>

        <h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-3">Lifestyle</h4>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip="evenodd" />
            </svg>
            <span>Extrovert</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip="evenodd" />
            </svg>
            <span>Non-smoker</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
              <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17.07A8 8 0 012 19.5V20h16v-.5c0-.53-.093-1.054-.275-1.55l-1.071-1.07A3 3 0 0012.93 17.07z" />
            </svg>
            <span>Social Drinker</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
              <path d="M7 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm.083 14h5.834V4h-5.834zM13 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1z" opacity=".4" />
              <path fill-rule="evenodd" d="M7 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm.083 14h5.834V4h-5.834zM13 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
            <span>Exercises weekly</span>
          </div>
        </div>
      </div>

      <!-- Call to Action / Interaction -->
      <div class="mt-auto pt-6 border-t border-gray-100 dark:border-gray-700 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
        <button class="flex-1 w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-md transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Send Message
        </button>
        <button class="flex-1 w-full border border-purple-600 text-purple-600 dark:border-purple-400 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-gray-700 font-bold py-3 px-6 rounded-lg text-lg shadow-md transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Suggest a Date
        </button>
      </div>

    </div>

  </div>

</div>