3D_Gradient_Rainbow_Accordion_Sports_Fitness

<div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="text-center py-6 px-4 sm:px-6 bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500 dark:from-red-700 dark:via-yellow-700 dark:via-green-700 dark:via-blue-700 dark:to-purple-700 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Fitness FAQs</h2>
      <p class="mt-2 text-sm sm:text-base opacity-90">Your guide to a healthier, stronger you!</p>
    </div>

    <div class="p-4 sm:p-6 space-y-4">

      <!-- Accordion Item 1 -->
      <details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-blue-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
        <summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-700 dark:to-blue-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-blue-600 group-open:to-indigo-500 relative z-10">
          <span>How often should I work out?</span>
          <svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </summary>
        <div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
          <p class="text-base leading-relaxed">For general fitness, aim for 3-5 days a week, combining cardio and strength training. Listen to your body and allow for rest days!</p>
          <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
        </div>
      </details>

      <!-- Accordion Item 2 -->
      <details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-purple-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
        <summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-purple-500 to-pink-600 dark:from-purple-700 dark:to-pink-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-pink-600 group-open:to-purple-500 relative z-10">
          <span>What's the best diet for muscle gain?</span>
          <svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </summary>
        <div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
          <p class="text-base leading-relaxed">Focus on a high-protein diet with complex carbohydrates and healthy fats. Ensure you're in a caloric surplus for effective muscle growth.</p>
          <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
        </div>
      </details>

      <!-- Accordion Item 3 -->
      <details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-green-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
        <summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-green-500 to-teal-600 dark:from-green-700 dark:to-teal-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-teal-600 group-open:to-green-500 relative z-10">
          <span>How important is stretching?</span>
          <svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </summary>
        <div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
          <p class="text-base leading-relaxed">Stretching improves flexibility, reduces injury risk, and enhances post-workout recovery. Incorporate dynamic stretches before and static stretches after workouts.</p>
          <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
        </div>
      </details>

    </div>
  </div>
</div>