Bulma Components in Cronos library

<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">
            <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">Donec sed leo sit amet ante ornare laoreet in quis est?</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 0.120381C7.38428 -0.0593303 7.69993 -0.0350495 7.87964 0.174613C8.05935 0.384276 8.03507 0.699926 7.8254 0.879637L4.3254 3.87964C4.13816 4.04013 3.86186 4.04013 3.67461 3.87964L0.174613 0.879637C-0.0350495 0.699926 -0.0593303 0.384276 0.120381 0.174613C0.300092 -0.0350495 0.615742 -0.0593303 0.825405 0.120381L4.00001 2.84147L7.17461 0.120381Z" fill="#001410"></path>
              </svg>
            </a>
            <p class="is-hidden subtitle">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="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">Mauris vitae ex ut lectus cursus ornare?</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 0.120381C7.38428 -0.0593303 7.69993 -0.0350495 7.87964 0.174613C8.05935 0.384276 8.03507 0.699926 7.8254 0.879637L4.3254 3.87964C4.13816 4.04013 3.86186 4.04013 3.67461 3.87964L0.174613 0.879637C-0.0350495 0.699926 -0.0593303 0.384276 0.120381 0.174613C0.300092 -0.0350495 0.615742 -0.0593303 0.825405 0.120381L4.00001 2.84147L7.17461 0.120381Z" fill="#001410"></path>
              </svg>
            </a>
            <p class="is-hidden subtitle">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="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">Nam consequat, augue sed rutrum faucibus?</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 0.120381C7.38428 -0.0593303 7.69993 -0.0350495 7.87964 0.174613C8.05935 0.384276 8.03507 0.699926 7.8254 0.879637L4.3254 3.87964C4.13816 4.04013 3.86186 4.04013 3.67461 3.87964L0.174613 0.879637C-0.0350495 0.699926 -0.0593303 0.384276 0.120381 0.174613C0.300092 -0.0350495 0.615742 -0.0593303 0.825405 0.120381L4.00001 2.84147L7.17461 0.120381Z" fill="#001410"></path>
              </svg>
            </a>
            <p class="is-hidden subtitle is-hidden-touch">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 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">Cras at ante non ligula pharetra elementum?</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 0.120381C7.38428 -0.0593303 7.69993 -0.0350495 7.87964 0.174613C8.05935 0.384276 8.03507 0.699926 7.8254 0.879637L4.3254 3.87964C4.13816 4.04013 3.86186 4.04013 3.67461 3.87964L0.174613 0.879637C-0.0350495 0.699926 -0.0593303 0.384276 0.120381 0.174613C0.300092 -0.0350495 0.615742 -0.0593303 0.825405 0.120381L4.00001 2.84147L7.17461 0.120381Z" fill="#001410"></path>
              </svg>
            </a>
            <p class="is-hidden subtitle">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>
  </div>
</section>