Industrial_Vibrant_Dating_Accordion

<div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 font-sans bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">

  <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-10 tracking-tight text-red-600 dark:text-red-500 uppercase leading-snug">
    <span class="block">Unlock Deep</span> Connections
  </h2>

  <div class="space-y-6 md:space-y-8">

    <!-- Accordion Item 1 -->
    <div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <input type="checkbox" id="accordion-1" class="hidden peer" />
      <label for="accordion-1" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-red-600 to-amber-500 dark:from-red-700 dark:to-orange-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-red-800 dark:border-red-900 hover:opacity-90 transition-opacity duration-200">
        <span class="flex items-center">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          Who Are You Looking For?
        </span>
        <span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">&#x2b;</span>
      </label>
      <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-green-500 dark:peer-checked:border-green-600">
        <p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
          Define your ideal partner. Our intelligent matching algorithm goes beyond just looks, connecting you with individuals who share your passions, values, and life goals. Get specific about what truly matters.
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Profile 1" class="w-12 h-12 rounded-full mr-4 border-2 border-red-500 dark:border-red-400 object-cover">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">Adventure Seeker</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Loves hiking & travel.</p>
            </div>
          </div>
          <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Profile 2" class="w-12 h-12 rounded-full mr-4 border-2 border-blue-500 dark:border-blue-400 object-cover">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">Creative Soul</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Passionate about art & music.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <input type="checkbox" id="accordion-2" class="hidden peer" />
      <label for="accordion-2" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-700 dark:to-cyan-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-blue-800 dark:border-blue-900 hover:opacity-90 transition-opacity duration-200">
        <span class="flex items-center">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10m-9 4h4M4 16v-4a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2z"></path>
          </svg>
          How Does Matching Work?
        </span>
        <span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">&#x2b;</span>
      </label>
      <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-red-500 dark:peer-checked:border-red-600">
        <p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
          <span>Our proprietary algorithm uses a combination of personality assessments, shared interests, and behavioral data to suggest highly compatible matches. It's designed to foster genuine connections.</span>
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <img src="https://picsum.photos/300/200?random=1" alt="Matchmaking Process 1" class="w-full h-32 object-cover rounded-md border-2 border-blue-400 dark:border-blue-500 shadow-md">
          <img src="https://picsum.photos/300/200?random=2" alt="Matchmaking Process 2" class="w-full h-32 object-cover rounded-md border-2 border-green-400 dark:border-green-500 shadow-md">
          <img src="https://picsum.photos/300/200?random=3" alt="Matchmaking Process 3" class="w-full h-32 object-cover rounded-md border-2 border-purple-400 dark:border-purple-500 shadow-md">
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <input type="checkbox" id="accordion-3" class="hidden peer" />
      <label for="accordion-3" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-green-600 to-lime-500 dark:from-green-700 dark:to-lime-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-green-800 dark:border-green-900 hover:opacity-90 transition-opacity duration-200">
        <span class="flex items-center">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M7 20v-2m3-2H7m4-10v4m-4-4V9m-2-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2zm0 0V5a2 2 0 012-2h4a2 2 0 012 2v2m0 0H9"></path>
          </svg>
          Safety & Privacy Measures
        </span>
        <span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">&#x2b;</span>
      </label>
      <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-orange-500 dark:peer-checked:border-orange-600">
        <p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
          Your safety is our priority. We employ robust security protocols and strict privacy policies to ensure a secure and respectful environment for all users. Report any suspicious activity immediately.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 text-md sm:text-lg">
          <li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">&#10003;</span> Encrypted Communication</li>
          <li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">&#10003;</span> Profile Verification</li>
          <li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">&#10003;</span> Anti-Scam Technology</li>
        </ul>
      </div>
    </div>

  </div>

</div>