Bulma FAQ Components

<section class="has-background-light py-24 is-relative is-clipped">
    <img class="is-absolute is-bottom-0" style="left: 50%; transform: translateX(-50%);" src="flaro-assets/images/faqs/gradient.svg" alt="">
    <div class="container px-8">
        <p class="mb-7 has-text-link has-text-centered has-text-weight-semibold is-uppercase">Have any questions?</p>
        <h2 class="mb-16 title is-size-1 has-text-centered has-text-weight-bold">Frequently Asked Questions</h2>
        <div class="mb-11 -m-1">
            <div class="p-1">
                <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="is-clickable">
                    <div class="py-7 px-8 has-background-white box">
                      <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between -m-2">
                        <div class="p-2" style="flex: 1;">
                          <h3 class="has-text-weight-semibold has-text-dark is-size-4">Do you provide any free plan?</h3>
                          <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'" class="is-clipped">
                              <p class="mt-4 has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                          </div>
                        </div>
                        <div class="p-2">
                            <div :class="{'is-rotate-180': accordion, 'is-rotate-0': !accordion }">
                                <svg class="relative top-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </div>
                      </div>

<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>

<section class="section has-background-light is-clipped">
  <div class="container">
    <h2 class="title mb-16">FAQs</h2>
    <div class="mb-4 py-4 pr-10 has-background-white">
      <div class="columns">
        <div class="column is-narrow">
          <div style="height: 100%; width: 1px; border-left: 2px solid #3665F3;"></div>
        </div>
        <div class="column is-narrow py-6 pl-8 pl-16-tablet pl-28-desktop is-align-self-center">
          <h2 class="title is-5 mb-0">Sed eget accumsan ipsum. Praesent dignissim?</h2>
          <p class="is-hidden mt-8 has-mw-2xl has-text-grey">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>
        </div>
        <div class="column ml-auto is-narrow">
          <button class="button is-ghost">
            <svg width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="mb-4 py-4 pr-10 has-background-white">
      <div class="columns">
        <div class="column is-narrow">

<section class="section py-24 has-background-white-bis">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-20 mb-16-widescreen has-text-centered">
      <h1 class="title is-size-2-mobile is-size-1-tablet px-12-widescreen is-spaced">Frequently asked questions</h1>
      <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="mb-20 mb-24-widescreen columns is-multiline">
      <div class="column is-6">
        <div class="px-6 px-16-tablet py-12 has-background-white">
          <img class="image" src="pstls-assets/icons/faq-info.svg" alt="">
          <h5 class="title is-size-4 mt-6 is-spaced">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h5>
          <p class="subtitle has-text-grey-darker">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.</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="px-6 px-16-tablet py-12 has-background-white">
          <img class="image" src="pstls-assets/icons/faq-info.svg" alt="">
          <h5 class="title is-size-4 mt-6 is-spaced">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h5>
          <p class="subtitle has-text-grey-darker">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.</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="px-6 px-16-tablet py-12 has-background-white">
          <img class="image" src="pstls-assets/icons/faq-info.svg" alt="">

<section class="section py-16">
  <div class="container">
    <div class="columns">
      <div class="column">
        <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Faq</small>
        <h2 class="title has-mw-xs">Questions and Answers</h2>
        <p class="subtitle has-mw-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
      </div>
      <div class="column">
        <nav class="navbar pb-3 mb-8 is-relative" role="navigation" aria-label="main navigation" style="border-bottom: 1px solid #EAEAEA;">
          <div id="navbarBasicExample">
            <div class="navbar-start"><a class="navbar-item title is-size-6 text-grey-darker has-text-weight-normal mb-0">General</a><a class="navbar-item title is-size-6 text-grey-darker has-text-weight-normal mb-0">Payments</a><a class="navbar-item title is-size-6 text-grey-darker has-text-weight-normal mb-0">Returns</a><a class="navbar-item title is-size-6 text-grey-darker has-text-weight-normal mb-0">Refunds</a></div>
          </div>
          <div class="is-absolute has-background-primary" style="width: 59px; height: 2px; left: 24px; bottom: -1px;"></div>
        </nav>
        <div class="is-relative p-4 mb-4 pr-6">
          <div class="has-background-primary is-absolute is-left-0 is-top-0" style="width: 100%; height: 100%; opacity: 0.1; border-radius: 4px;"></div>
          <div class="columns is-relative" style="z-index: 1;">
            <div class="column is-narrow">
              <div class="has-background-primary is-relative p-4 is-inline-block" style="border-radius: 2px;">
                <span class="is-absolute is-size-7 has-text-white has-text-weight-medium" style="transform: translate(-50%, -50%)">1</span>
              </div>
            </div>
            <div class="column">

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">NEW FEATURE</span>
      <h1 class="title is-size-3 has-leading-3 has-text-primary">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="subtitle is-size-5 mt-6 mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="is-flex is-flex-wrap-wrap is-justify-content-center mb-16"><a class="button is-primary m-0" href="#">Activate demo</a><a class="button is-info is-light has-text-weight-semibold m-0" href="#">Normal Tab</a><a class="button is-info is-light has-text-weight-semibold m-0" href="#">Normal Tab</a><a class="button is-info is-light has-text-weight-semibold m-0" href="#">Normal Tab</a></div>
    </div>
    <div class="has-mw-4xl mx-auto">
      <div class="py-4 px-6 pl-10-tablet pr-14-tablet has-background-white">
        <button class="button is-light p-0 is-fullwidth is-align-items-center is-justify-content-space-between has-background-transparent has-text-left button-wrap-text">
          <span class="is-size-6 has-text-primary-dark">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
          <span>
            <svg width="16" height="12" viewbox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z" fill="#3C74F9"></path>
            </svg>
          </span>
        </button>
      </div>
      <div class="py-4 px-6 pl-10-tablet pr-14-tablet has-background-info-light">
        <button class="button is-light p-0 is-fullwidth is-align-items-center is-justify-content-space-between has-background-transparent has-text-left button-wrap-text">
          <span class="is-size-5 has-text-info">Quick problem-solving contact</span>
          <span>
            <svg width="17" height="12" viewbox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="section is-background-contain is-background-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container">
    <div class="has-text-centered mb-6">
      <img class="is-fullwidth is-max-w-sm mb-5" src="metis-assets/illustrations/hardworking-man.png" alt="">
      <form action="#">
        <div class="is-max-w-2xl mx-auto">
          <div class="field has-addons">
            <div class="control is-expanded">
              <input class="input" placeholder="Search, find any question you want to ask...">
            </div>
            <div class="control">
              <button class="button is-primary">
                <svg class="image is-16x16" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="columns is-multiline mb-6">
      <div class="column is-3-widescreen is-6-desktop is-12-touch">
        <div class="card card-content content has-background-white">

<section class="section">
  <div class="container">
    <div class="has-mw-3xl mx-auto mb-8 has-text-centered">
      <span class="tag is-warning is-light">Lorem Ipsum</span>
      <h2 class="mt-6 mb-4 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="has-mw-xl subtitle mx-auto mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="buttons mx-auto mb-16 is-centered">
        <button class="button is-ghost has-text-primary is-size-5 has-text-weight-bold">General</button>
        <button class="button is-ghost is-size-5 has-text-dark has-text-weight-bold">Payments</button>
        <button class="button is-ghost is-size-5 has-text-dark has-text-weight-bold">Returns</button>
        <button class="button is-ghost is-size-5 has-text-dark has-text-weight-bold">Refunds</button>
      </div>
      <div class="has-mw-3xl mx-auto has-text-left">
        <ul>
          <li class="mb-8 px-6 pb-4">
            <a class="is-medium pl-0 is-ghost has-text-dark is-flex is-justify-content-space-between is-align-items-center is-fullwidth" href="#">
              <h6 class="title is-4">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h6>
              <svg class="is-flex-shrink-0" width="8" height="4" viewbox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.17461 3.87962C7.38428 4.05933 7.69993 4.03505 7.87964 3.82539C8.05935 3.61572 8.03507 3.30007 7.8254 3.12036L4.3254 0.120363C4.13816 -0.040133 3.86186 -0.040133 3.67461 0.120363L0.174613 3.12036C-0.0350495 3.30007 -0.0593303 3.61572 0.120381 3.82539C0.300092 4.03505 0.615742 4.05933 0.825405 3.87962L4.00001 1.15853L7.17461 3.87962Z" fill="#001410"></path>
              </svg>
            </a>
            <p class="subtitle mt-6">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="mb-8 px-6 pb-4">

<section class="section">
  <div class="container">
    <div class="mb-5 columns is-multiline is-centered">
      <div class="column is-10 is-6-desktop has-text-centered">
        <span class="has-text-grey-dark">Lorem ipsum</span>
        <h2 class="mt-2 mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="mb-6 subtitle has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <ul class="buttons is-centered">
          <li><a class="button is-primary" href="#">General</a></li>
          <li><a class="button is-white has-text-primary" href="#">Payments</a></li>
          <li><a class="button is-white has-text-primary" href="#">Returns</a></li>
          <li><a class="button is-white has-text-primary" href="#">Refunds</a></li>
        </ul>
      </div>
    </div>
    <div class="columns is-multiline is-centered">
      <div class="column is-10 is-8-desktop">
        <ul>
          <li class="mb-4">
            <button class="button is-fullwidth is-flex is-justify-content-between is-align-items-center is-primary has-text-left" style="height: auto; white-space: unset;" type="button">
              <h2 class="pr-4 mr-auto">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h2>
              <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="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M13.4709 11.4423L9.99995 7.95626L6.52895 11.4423" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-12" style="letter-spacing: -0.04em;">FAQ</h1>
    <div class="columns is-multiline">
      <div class="column is-4">
        <div class="has-mw-xs">
          <p class="is-size-6">
            <span class="has-text-grey">Couldnt&grave;t fint what you were looking for? write to us at</span>
            <a class="has-text-dark is-inline-block" href="mailto:">help@snazzy.co</a>
          </p>
        </div>
      </div>
      <div class="column is-8">
        <div class="has-mw-3xl ml-auto-desktop">
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">What is Cult Wine Investment?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>