Neon_Glow_Accordion_Fashion_Beauty

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-orange-50 to-amber-100 dark:from-stone-900 dark:to-orange-950 min-h-screen font-sans">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 sm:mb-12 text-amber-900 dark:text-orange-50 relative">
    <span class="block relative z-10">Frequently Asked Questions</span>
    <span class="absolute inset-0 bg-amber-500 blur-sm opacity-30 dark:bg-orange-800 dark:opacity-40 z-0"></span>
  </h2>

  <div class="max-w-3xl mx-auto space-y-4">

    <!-- Accordion Item 1 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-1" class="hidden peer">
      <label for="accordion-1" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        What are your shipping options?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          We offer standard and express shipping options. Standard shipping usually takes 3-5 business days, while express shipping delivers within 1-2 business days. Shipping costs vary based on your location and chosen method.
        </p>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-2" class="hidden peer">
      <label for="accordion-2" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        How do I find my perfect shade?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          Our website features a 'Shade Finder' tool that helps you determine your ideal match based on your skin tone and undertones. You can also consult our detailed product descriptions and customer reviews for guidance.
        </p>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-3" class="hidden peer">
      <label for="accordion-3" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        Do you offer international shipping?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          Yes, we proudly ship our products worldwide! Please note that international shipping times and costs may vary. Customs duties and taxes, if applicable, are the responsibility of the recipient.
        </p>
      </div>
    </div>

    <!-- Accordion Item 4 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-4" class="hidden peer">
      <label for="accordion-4" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        What is your return policy?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          We accept returns of unused and unopened products within 30 days of purchase for a full refund or exchange. Please visit our 'Returns & Exchanges' page for detailed instructions and to initiate a return.
        </p>
      </div>
    </div>

  </div>
</div>