Accordion

                  
<!-- Accordion alpinejs -->
<div class="flex ioajsklehsnm spoathnmkles" x-data="{ open: 1 }">
  <!-- Question 1 -->
  <div class="frame-corner relative bg-black border border-primary-600 mklausjenrhtm">
    <h3 @click="open = (open === 1 ? null : 1)" :class="{'border-b': open === 1 }" class="cursor-pointer p-4 flex layhetgsjdcb vlaoethsnkma bg-black border-primary-600">
      <span class="font-medium text-primary-300">What is the Futuristic Tailwind Dashboard Template?</span>
      <span :class="{'transform rotate-180': open === 1}" class="transform transition-transform">
        <i class="bi bi-chevron-down text-primary-300"></i>
      </span>
    </h3>
    <div x-show="open === 1" style="display:none;">
      <div class="uajskeiolksb py-6 text-gray-400">
        The Futuristic Tailwind Dashboard Template is a modern and fully responsive template designed for creating futuristic web applications and dashboards. It includes a wide range of prebuilt components, charts, and plugins, all styled with Tailwind CSS for easy customization.
      </div>
    </div>
  </div>

  <!-- Question 2 -->
  <div class="frame-corner relative bg-black border border-primary-600 mklausjenrhtm">
    <h3 @click="open = (open === 2 ? null : 2)" :class="{'border-b': open === 2 }" class="cursor-pointer p-4 flex layhetgsjdcb vlaoethsnkma bg-black border-primary-600">
      <span class="font-medium text-primary-300">What is the difference between single and multiple licenses?</span>
      <span :class="{'transform rotate-180': open === 2}" class="transform transition-transform">
        <i class="bi bi-chevron-down text-primary-300"></i>
      </span>
    </h3>
    <div x-show="open === 2" style="display:none;">
      <div class="uajskeiolksb py-6 text-gray-400">
        Single licenses are only for 2 personal or client projects and multiple licenses are for unlimited projects. Multiple licenses are perfect for web/app service providers and single licenses are perfect for personal or freelance projects.
      </div>
    </div>
  </div>

  <!-- Question 3 -->
  <div class="frame-corner relative bg-black border border-primary-600 mklausjenrhtm">
    <h3 @click="open = (open === 3 ? null : 3)" :class="{'border-b': open === 3 }" class="cursor-pointer p-4 flex layhetgsjdcb vlaoethsnkma bg-black border-primary-600">
      <span class="font-medium text-primary-300">Can I use the template for commercial projects?</span>
      <span :class="{'transform rotate-180': open === 3}" class="transform transition-transform">
        <i class="bi bi-chevron-down text-primary-300"></i>
      </span>
    </h3>
    <div x-show="open === 3" style="display:none;">
      <div class="uajskeiolksb py-6 text-gray-400">
        Absolutely! Tailwind Futuristic Dashboard Template is licensed for commercial use, which allows you to use this template for custom web/app services. This template is perfect for freelancers, agencies, and web service providers.
      </div>
    </div>
  </div>

  <!-- Question 4 -->
  <div class="frame-corner relative bg-black border border-primary-600 mklausjenrhtm">
    <h3 @click="open = (open === 4 ? null : 4)" :class="{'border-b': open === 4 }" class="cursor-pointer p-4 flex layhetgsjdcb vlaoethsnkma bg-black border-primary-600">
      <span class="font-medium text-primary-300">What support is available with the template?</span>
      <span :class="{'transform rotate-180': open === 4}" class="transform transition-transform">
        <i class="bi bi-chevron-down text-primary-300"></i>
      </span>
    </h3>
    <div x-show="open === 4" style="display:none;">
      <div class="uajskeiolksb py-6 text-gray-400">
        The template comes with 24/7 support and lifetime updates, ensuring that you always have access to the latest features and help when you need it. This makes it a reliable choice for long-term projects.
      </div>
    </div>
  </div>

  <!-- Question 5 -->
  <div class="frame-corner relative bg-black border border-primary-600 mklausjenrhtm">
    <h3 @click="open = (open === 5 ? null : 5)" :class="{'border-b': open === 5 }" class="cursor-pointer p-4 flex layhetgsjdcb vlaoethsnkma bg-black border-primary-600">
      <span class="font-medium text-primary-300">Is the template fully responsive?</span>
      <span :class="{'transform rotate-180': open === 5}" class="transform transition-transform">
        <i class="bi bi-chevron-down text-primary-300"></i>
      </span>
    </h3>
    <div x-show="open === 5" style="display:none;">
      <div class="uajskeiolksb py-6 text-gray-400">
        Yes, the Futuristic Tailwind Dashboard Template is fully responsive, ensuring that your dashboards and web applications look great on all devices, from desktops to mobile phones.
      </div>
    </div>
  </div>
</div>
                  
                

                  
<!-- Collapse Individual Alpine.js -->
<div class="flex ioajsklehsnm spoathnmkles">
  <!-- Question 1 -->
  <div x-data="{ open: false }" class="frame-corner relative bg-black border border-primary-600 mklausjenrhtm">
    <h3 @click="open = !open" :class="{'border-b': open}" class="cursor-pointer p-4 flex layhetgsjdcb vlaoethsnkma bg-black border-primary-600">
      <span class="font-medium text-primary-300">What is the Futuristic Tailwind Dashboard Template?</span>
      <span :class="{'transform rotate-180': open}" class="transform transition-transform">
        <i class="bi bi-chevron-down text-primary-300"></i>
      </span>
    </h3>
    <div x-show="open" style="display:none;">
      <div class="uajskeiolksb py-6 text-gray-400">
        The Futuristic Tailwind Dashboard Template is a modern and fully responsive template designed for creating futuristic web applications and dashboards. It includes a wide range of prebuilt components, charts, and plugins, all styled with Tailwind CSS for easy customization.
      </div>
    </div>
  </div>

  <!-- Question 2 -->
  <div x-data="{ open: false }" class="frame-corner relative bg-black border border-primary-600 mklausjenrhtm">
    <h3 @click="open = !open" :class="{'border-b': open}" class="cursor-pointer p-4 flex layhetgsjdcb vlaoethsnkma bg-black border-primary-600">
      <span class="font-medium text-primary-300">What is the difference between single and multiple licenses?</span>
      <span :class="{'transform rotate-180': open}" class="transform transition-transform">
        <i class="bi bi-chevron-down text-primary-300"></i>
      </span>
    </h3>
    <div x-show="open" style="display:none;">
      <div class="uajskeiolksb py-6 text-gray-400">
        Single licenses are only for 2 personal or client projects and multiple licenses are for unlimited projects. Multiple licenses are perfect for web/app service providers and single licenses are perfect for personal or freelance projects.
      </div>
    </div>
  </div>

  <!-- Question 3 -->
  <div x-data="{ open: false }" class="frame-corner relative bg-black border border-primary-600 mklausjenrhtm">
    <h3 @click="open = !open" :class="{'border-b': open}" class="cursor-pointer p-4 flex layhetgsjdcb vlaoethsnkma bg-black border-primary-600">
      <span class="font-medium text-primary-300">Can I use the template for commercial projects?</span>
      <span :class="{'transform rotate-180': open}" class="transform transition-transform">
        <i class="bi bi-chevron-down text-primary-300"></i>
      </span>
    </h3>
    <div x-show="open" style="display:none;">
      <div class="uajskeiolksb py-6 text-gray-400">
        Absolutely! Tailwind Futuristic Dashboard Template is licensed for commercial use, which allows you to use this template for custom web/app services. This template is perfect for freelancers, agencies, and web service providers.
      </div>
    </div>
  </div>

  <!-- Question 4 -->
  <div x-data="{ open: false }" class="frame-corner relative bg-black border border-primary-600 mklausjenrhtm">
    <h3 @click="open = !open" :class="{'border-b': open}" class="cursor-pointer p-4 flex layhetgsjdcb vlaoethsnkma bg-black border-primary-600">
      <span class="font-medium text-primary-300">What support is available with the template?</span>
      <span :class="{'transform rotate-180': open}" class="transform transition-transform">
        <i class="bi bi-chevron-down text-primary-300"></i>
      </span>
    </h3>
    <div x-show="open" style="display:none;">
      <div class="uajskeiolksb py-6 text-gray-400">
        The template comes with 24/7 support and lifetime updates, ensuring that you always have access to the latest features and help when you need it. This makes it a reliable choice for long-term projects.
      </div>
    </div>
  </div>

  <!-- Question 5 -->
  <div x-data="{ open: false }" class="frame-corner relative bg-black border border-primary-600 mklausjenrhtm">
    <h3 @click="open = !open" :class="{'border-b': open}" class="cursor-pointer p-4 flex layhetgsjdcb vlaoethsnkma bg-black border-primary-600">
      <span class="font-medium text-primary-300">Is the template fully responsive?</span>
      <span :class="{'transform rotate-180': open}" class="transform transition-transform">
        <i class="bi bi-chevron-down text-primary-300"></i>
      </span>
    </h3>
    <div x-show="open" style="display:none;">
      <div class="uajskeiolksb py-6 text-gray-400">
        Yes, the Futuristic Tailwind Dashboard Template is fully responsive, ensuring that your dashboards and web applications look great on all devices, from desktops to mobile phones.
      </div>
    </div>
  </div>
</div>