Bulma Faq Components

<section class="is-relative section py-20">
  <img class="is-absolute is-left-0 is-top-0 mt-16 is-hidden-mobile" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="is-absolute is-right-0 is-bottom-0 mb-20 is-hidden-mobile" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container">
    <div class="has-mw-3xl mx-auto has-text-centered mb-12">
      <span class="is-size-7"><small class="has-text-info has-text-weight-semibold">What&apos;s new at Shuffle</small></span>
      <h2 class="mt-8 mb-10 title is-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="has-mw-2xl mx-auto mb-6 mb-12-desktop">
      <div class="tabs is-centered">
        <ul>
          <li><a>General</a></li>
          <li class="is-active"><a>Payments</a></li>
          <li><a>Returns</a></li>
          <li><a>Refunds</a></li>
        </ul>
      </div>
    </div>
    <div class="has-mw-3xl mx-auto">
      <ul>
        <li class="px-6 py-8" style="border-bottom: 1px solid #DADFE9;">
          <a class="px-1 is-flex is-justify-content-between is-align-items-center has-text-left has-text-weight-semibold" style="width: 100%; border: none;">
            <span class="is-size-4 has-text-dark">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <svg class="is-flex-shrink-0 ml-auto" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2498 10C19.2498 4.892 15.1088 0.75 9.99976 0.75C4.89176 0.75 0.749756 4.892 0.749756 10C0.749756 15.108 4.89176 19.25 9.99976 19.25C15.1088 19.25 19.2498 15.108 19.2498 10Z" stroke="#45C1FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M13.4709 11.4423L9.99995 7.95626L6.52895 11.4423" stroke="#45C1FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <p class="mt-4 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </li>
        <li class="px-6 py-8" style="border-bottom: 1px solid #DADFE9;">
          <a class="px-1 is-flex is-justify-content-between is-align-items-center has-text-left has-text-weight-semibold" style="width: 100%; border: none;">
            <span class="is-size-4 has-text-dark">Donec sed leo sit amet ante ornare laoreet in quis est?</span>
            <svg class="is-flex-shrink-0 ml-auto" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.750244 10C0.750244 15.108 4.89124 19.25 10.0002 19.25C15.1082 19.25 19.2502 15.108 19.2502 10C19.2502 4.892 15.1082 0.75 10.0002 0.75C4.89124 0.75 0.750244 4.892 0.750244 10Z" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.52905 8.55768L10.0001 12.0437L13.4711 8.55768" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <p class="is-hidden mt-4 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
        </li>
        <li class="px-6 py-8" style="border-bottom: 1px solid #DADFE9;">
          <a class="px-1 is-flex is-justify-content-between is-align-items-center has-text-left has-text-weight-semibold" style="width: 100%; border: none;">
            <span class="is-size-4 has-text-dark">Mauris vitae ex ut lectus cursus ornare?</span>
            <svg class="is-flex-shrink-0 ml-auto" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.750244 10C0.750244 15.108 4.89124 19.25 10.0002 19.25C15.1082 19.25 19.2502 15.108 19.2502 10C19.2502 4.892 15.1082 0.75 10.0002 0.75C4.89124 0.75 0.750244 4.892 0.750244 10Z" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.52905 8.55768L10.0001 12.0437L13.4711 8.55768" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <p class="is-hidden mt-4 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
        </li>
        <li class="px-6 py-8" style="border-bottom: 1px solid #DADFE9;">
          <a class="px-1 is-flex is-justify-content-between is-align-items-center has-text-left has-text-weight-semibold" style="width: 100%; border: none;">
            <span class="is-size-4 has-text-dark">Nam consequat, augue sed rutrum faucibus?</span>
            <svg class="is-flex-shrink-0 ml-auto" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.750244 10C0.750244 15.108 4.89124 19.25 10.0002 19.25C15.1082 19.25 19.2502 15.108 19.2502 10C19.2502 4.892 15.1082 0.75 10.0002 0.75C4.89124 0.75 0.750244 4.892 0.750244 10Z" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.52905 8.55768L10.0001 12.0437L13.4711 8.55768" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <p class="is-hidden mt-4 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </li>
        <li class="px-6 py-8" style="border-bottom: 1px solid #DADFE9;">
          <a class="px-1 is-flex is-justify-content-between is-align-items-center has-text-left has-text-weight-semibold" style="width: 100%; border: none;">
            <span class="is-size-4 has-text-dark">Cras at ante non ligula pharetra elementum?</span>
            <svg class="is-flex-shrink-0 ml-auto" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.750244 10C0.750244 15.108 4.89124 19.25 10.0002 19.25C15.1082 19.25 19.2502 15.108 19.2502 10C19.2502 4.892 15.1082 0.75 10.0002 0.75C4.89124 0.75 0.750244 4.892 0.750244 10Z" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.52905 8.55768L10.0001 12.0437L13.4711 8.55768" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <p class="is-hidden mt-4 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </li>
      </ul>
    </div>
  </div>
</section>