Bulma Faq Components

<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">
              <div>
                <h5 class="title is-size-5 has-leading-3 has-text-weight-medium mb-4">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h5>
                <p class="subtitle is-size-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>
              </div>
            </div>
            <div class="column is-narrow">
              <a href="#">
                <img src="acros-assets/icons/faq/arrow-up.svg" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="is-relative p-4 mb-4 pr-6">
          <div class="has-background-white-ter is-absolute is-left-0 is-top-0" style="width: 100%; height: 100%; border-radius: 4px;"></div>
          <div class="columns is-align-items-center is-relative" style="z-index: 1;">
            <div class="column is-narrow pb-1">
              <div class="has-background-white is-relative p-4 is-inline-block" style="border-radius: 2px;">
                <span class="is-absolute is-size-7 has-text-weight-medium" style="transform: translate(-50%, -50%)">2</span>
              </div>
            </div>
            <div class="column">
              <h5 class="title is-size-5">Donec sed leo sit amet ante ornare laoreet in quis est?</h5>
            </div>
            <div class="column is-narrow pb-1">
              <a href="#">
                <img src="acros-assets/icons/faq/arrow-down.svg" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="is-relative p-4 mb-4 pr-6">
          <div class="has-background-white-ter is-absolute is-left-0 is-top-0" style="width: 100%; height: 100%; border-radius: 4px;"></div>
          <div class="columns is-align-items-center is-relative" style="z-index: 1;">
            <div class="column is-narrow pb-1">
              <div class="has-background-white is-relative p-4 is-inline-block" style="border-radius: 2px;">
                <span class="is-absolute is-size-7 has-text-weight-medium" style="transform: translate(-50%, -50%)">3</span>
              </div>
            </div>
            <div class="column">
              <h5 class="title is-size-5">Mauris vitae ex ut lectus cursus ornare?</h5>
            </div>
            <div class="column is-narrow pb-1">
              <a href="#">
                <img src="acros-assets/icons/faq/arrow-down.svg" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="is-relative p-4 mb-4 pr-6">
          <div class="has-background-white-ter is-absolute is-left-0 is-top-0" style="width: 100%; height: 100%; border-radius: 4px;"></div>
          <div class="columns is-align-items-center is-relative" style="z-index: 1;">
            <div class="column is-narrow pb-1">
              <div class="has-background-white is-relative p-4 is-inline-block" style="border-radius: 2px;">
                <span class="is-absolute is-size-7 has-text-weight-medium" style="transform: translate(-50%, -50%)">4</span>
              </div>
            </div>
            <div class="column">
              <h5 class="title is-size-5">Nam consequat, augue sed rutrum faucibus?</h5>
            </div>
            <div class="column is-narrow pb-1">
              <a href="#">
                <img src="acros-assets/icons/faq/arrow-down.svg" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="is-relative p-4 pr-6">
          <div class="has-background-white-ter is-absolute is-left-0 is-top-0" style="width: 100%; height: 100%; border-radius: 4px;"></div>
          <div class="columns is-align-items-center is-relative" style="z-index: 1;">
            <div class="column is-narrow pb-1">
              <div class="has-background-white is-relative p-4 is-inline-block" style="border-radius: 2px;">
                <span class="is-absolute is-size-7 has-text-weight-medium" style="transform: translate(-50%, -50%)">5</span>
              </div>
            </div>
            <div class="column">
              <h5 class="title is-size-5">Cras at ante non ligula pharetra elementum?</h5>
            </div>
            <div class="column is-narrow pb-1">
              <a href="#">
                <img src="acros-assets/icons/faq/arrow-down.svg" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>