Animated FAQ Accordion with Tailwind CSS

<div class="max-w-4xl mr-auto ml-auto pt-24 pr-6 pb-16 pl-6">
    <!-- Heading -->
    <div class="text-center mb-12 sm:mb-16">
      <h2 class="text-4xl sm:text-5xl font-semibold tracking-tight text-neutral-100">Your Questions, Answered</h2>
      <p class="mt-4 max-w-2xl mx-auto text-base sm:text-lg text-neutral-400 leading-relaxed">Get instant answers to most common questions about Crypton.</p>
    </div>

    <!-- FAQ -->
    <div class="space-y-5">
  <!-- Item 1 (open) -->
  <div class="ring-1 ring-white/5 overflow-hidden bg-gradient-to-b from-violet-500/15 via-violet-500/10 to-fuchsia-500/0 border-white/10 border rounded-3xl transition-all duration-300" data-acc-item="" data-open="true">
    <button type="button" class="w-full text-left px-6 sm:px-8 py-5 sm:py-6 flex items-start justify-between gap-6 hover:bg-white/5 transition-colors" data-acc-btn="">
      <span class="text-lg sm:text-xl font-semibold tracking-tight text-neutral-100">How do I create and verify my Crypton account?</span>
      <span class="inline-flex items-center justify-center rounded-full bg-white/10 ring-1 ring-white/10 text-white h-8 w-8 shrink-0 transition-transform duration-200">
        <!-- Animated icon with smooth transitions -->
        <div class="relative" data-acc-icon="">
          <div class="absolute inset-0 flex items-center justify-center transition-all duration-300" style="opacity: 1; transform: rotate(0deg);">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14" class=""></path></svg>
          </div>
          <div class="flex items-center justify-center transition-all duration-300" style="opacity: 0; transform: rotate(90deg);">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
          </div>
        </div>
      </span>
    </button>
    <div class="transition-all duration-300 ease-in-out overflow-hidden" data-acc-panel="" style="max-height: 104px; opacity: 1;">
      <div class="sm:px-8 sm:pb-8 pt-0 pr-6 pb-6 pl-6">
        <p class="text-sm sm:text-base text-neutral-300 leading-relaxed">Creating a Crypton account is easy—just sign up with your email and a secure password. After that, confirm your email address, and you're ready to start exploring the platform. No lengthy forms or complicated steps involved.</p>
      </div>
    </div>
  </div>

  <!-- Item 2 -->
  <div class="rounded-3xl border border-white/10 ring-1 ring-white/5 overflow-hidden bg-neutral-900/40 hover:bg-white/5 transition-all duration-300" data-acc-item="" data-open="false">
    <button type="button" class="w-full text-left px-6 sm:px-8 py-5 sm:py-6 flex items-center justify-between gap-6 hover:bg-white/5 transition-colors" data-acc-btn="">
      <span class="text-lg sm:text-xl font-semibold tracking-tight text-neutral-100">How secure is Crypton with my digital assets?</span>
      <span class="inline-flex items-center justify-center rounded-full bg-white/10 ring-1 ring-white/10 text-white h-8 w-8 shrink-0 transition-transform duration-200">
        <div class="relative" data-acc-icon="">
          <div class="absolute inset-0 flex items-center justify-center transition-all duration-300" style="opacity: 0; transform: rotate(90deg);">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14" class=""></path></svg>
          </div>
          <div class="flex items-center justify-center transition-all duration-300" style="opacity: 1; transform: rotate(0deg);">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
          </div>
        </div>
      </span>
    </button>
    <div class="transition-all duration-300 ease-in-out overflow-hidden" data-acc-panel="" style="max-height: 0; opacity: 0;">
      <div class="px-6 sm:px-8 pb-6 sm:pb-8 pt-0">
        <p class="text-sm sm:text-base text-neutral-300 leading-relaxed">We use industry‑standard encryption, multi‑sig cold storage, and routine security audits. Your funds and data are protected by multiple layers of defense.</p>
      </div>
    </div>
  </div>

  <!-- Item 3 -->
  <div class="rounded-3xl border border-white/10 ring-1 ring-white/5 overflow-hidden bg-neutral-900/40 hover:bg-white/5 transition-all duration-300" data-acc-item="" data-open="false">
    <button type="button" class="w-full text-left px-6 sm:px-8 py-5 sm:py-6 flex items-center justify-between gap-6 hover:bg-white/5 transition-colors" data-acc-btn="">
      <span class="text-lg sm:text-xl font-semibold tracking-tight text-neutral-100">What cryptocurrencies can I trade on the platform?</span>
      <span class="inline-flex items-center justify-center rounded-full bg-white/10 ring-1 ring-white/10 text-white h-8 w-8 shrink-0 transition-transform duration-200">
        <div class="relative" data-acc-icon="">
          <div class="absolute inset-0 flex items-center justify-center transition-all duration-300" style="opacity: 0; transform: rotate(90deg);">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14" class=""></path></svg>
          </div>
          <div class="flex items-center justify-center transition-all duration-300" style="opacity: 1; transform: rotate(0deg);">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
          </div>
        </div>
      </span>
    </button>
    <div class="transition-all duration-300 ease-in-out overflow-hidden" data-acc-panel="" style="max-height: 0; opacity: 0;">
      <div class="px-6 sm:px-8 pb-6 sm:pb-8 pt-0">
        <p class="text-sm sm:text-base text-neutral-300 leading-relaxed">Trade leading assets like BTC, ETH, SOL, and 100+ more pairs. We add new markets regularly based on demand and security reviews.</p>
      </div>
    </div>
  </div>

  <!-- Item 4 -->
  <div class="rounded-3xl border border-white/10 ring-1 ring-white/5 overflow-hidden bg-neutral-900/40 hover:bg-white/5 transition-all duration-300" data-acc-item="" data-open="false">
    <button type="button" class="w-full text-left px-6 sm:px-8 py-5 sm:py-6 flex items-center justify-between gap-6 hover:bg-white/5 transition-colors" data-acc-btn="">
      <span class="text-lg sm:text-xl font-semibold tracking-tight text-neutral-100">What fees are associated with trading and transfers?</span>
      <span class="inline-flex items-center justify-center rounded-full bg-white/10 ring-1 ring-white/10 text-white h-8 w-8 shrink-0 transition-transform duration-200">
        <div class="relative" data-acc-icon="">
          <div class="absolute inset-0 flex items-center justify-center transition-all duration-300" style="opacity: 0; transform: rotate(90deg);">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14" class=""></path></svg>
          </div>
          <div class="flex items-center justify-center transition-all duration-300" style="opacity: 1; transform: rotate(0deg);">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
          </div>
        </div>
      </span>
    </button>
    <div class="transition-all duration-300 ease-in-out overflow-hidden" data-acc-panel="" style="max-height: 0; opacity: 0;">
      <div class="px-6 sm:px-8 pb-6 sm:pb-8 pt-0">
        <p class="text-sm sm:text-base text-neutral-300 leading-relaxed">We offer transparent, tiered trading fees with discounts for higher volumes. Network transfer fees are passed through at cost with no hidden markups.</p>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.getElementById('aura-emfqerdim');
      if (!root) return;
      
      const items = Array.from(root.querySelectorAll('[data-acc-item]'));
      
      items.forEach((card) => {
        const btn = card.querySelector('[data-acc-btn]');
        const panel = card.querySelector('[data-acc-panel]');
        const iconContainer = card.querySelector('[data-acc-icon]');
        const isOpen = card.dataset.open === 'true';

        function setOpen(open) {
          card.dataset.open = open ? 'true' : 'false';
          
          // Smooth panel animation
          if (panel) {
            if (open) {
              panel.style.maxHeight = panel.scrollHeight + 'px';
              panel.style.opacity = '1';
            } else {
              panel.style.maxHeight = '0';
              panel.style.opacity = '0';
            }
          }
          
          // Animate icon - smooth transition between + and -
          if (iconContainer) {
            const minusIcon = iconContainer.children[0]; // minus icon (horizontal line)
            const plusIcon = iconContainer.children[1]; // plus icon (+ shape)
            
            if (open) {
              // Show minus, hide plus
              minusIcon.style.opacity = '1';
              minusIcon.style.transform = 'rotate(0deg)';
              plusIcon.style.opacity = '0';
              plusIcon.style.transform = 'rotate(90deg)';
            } else {
              // Show plus, hide minus  
              minusIcon.style.opacity = '0';
              minusIcon.style.transform = 'rotate(90deg)';
              plusIcon.style.opacity = '1';
              plusIcon.style.transform = 'rotate(0deg)';
            }
          }
          
          // Background transitions
          if (open) {
            card.classList.remove('bg-neutral-900/40');
            card.classList.add('bg-gradient-to-b', 'from-violet-500/15', 'via-violet-500/10', 'to-fuchsia-500/0');
          } else {
            card.classList.add('bg-neutral-900/40');
            card.classList.remove('bg-gradient-to-b', 'from-violet-500/15', 'via-violet-500/10', 'to-fuchsia-500/0');
          }
        }

        // Initialize state
        setOpen(isOpen);

        // Click handler
        if (btn) {
          btn.addEventListener('click', () => {
            const willOpen = card.dataset.open !== 'true';
            
            // Close all other items
            items.forEach(otherCard => {
              if (otherCard !== card) {
                const otherIconContainer = otherCard.querySelector('[data-acc-icon]');
                const otherPanel = otherCard.querySelector('[data-acc-panel]');
                
                otherCard.dataset.open = 'false';
                
                if (otherPanel) {
                  otherPanel.style.maxHeight = '0';
                  otherPanel.style.opacity = '0';
                }
                
                if (otherIconContainer) {
                  const otherMinusIcon = otherIconContainer.children[0];
                  const otherPlusIcon = otherIconContainer.children[1];
                  otherMinusIcon.style.opacity = '0';
                  otherMinusIcon.style.transform = 'rotate(90deg)';
                  otherPlusIcon.style.opacity = '1';
                  otherPlusIcon.style.transform = 'rotate(0deg)';
                }
                
                otherCard.classList.add('bg-neutral-900/40');
                otherCard.classList.remove('bg-gradient-to-b', 'from-violet-500/15', 'via-violet-500/10', 'to-fuchsia-500/0');
              }
            });
            
            // Toggle current item
            setOpen(willOpen);
          });
        }
      });
    })();
  </script>
</div>
  </div>