About Components in Asitrastudio library

<section class="py-12 md:py-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="max-w-4xl px-8 mb-20 mx-auto text-center">
      <p class="text-xl lg:text-2xl tracking-tight mb-10">
        <span>KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span>
        <span class="italic text-coolGray-600">London, Chicago, Barcelona, Vienna, Rome, Las Vegas.</span>
        <span>KW70 Fix initiative seeks out regions and markets with robust underlying catalysts, such as burgeoning technology sectors, a diverse workforce, and a strong entrepreneurial culture. In those carefully selected markets and locations, we bring capital and expertise to such as burgeoning technology sectors, a diverse workforce, and a strong entrepreneurial culture.</span>
      </p>
      <a class="group inline-flex items-center leading-none font-medium pb-2 border-b-2 border-black" href="#">
        <span class="mr-4">Get to know us</span>
        <span class="group-hover:rotate-45 transform transition duration-100">
          <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </a>
    </div>
    <div class="max-w-sm mx-auto sm:max-w-none">
      <div class="flex flex-wrap">
        <div class="w-full sm:w-1/2 lg:w-1/4">
          <div class="flex h-72 items-end pl-8 pr-1 pt-8 pb-12 border rounded-5xl">
            <div>
              <h5 class="text-5xl lg:text-4xl 2xl:text-7xl mb-5">700+</h5>
              <span class="block text-coolGray-600">Clients</span>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4">
          <div class="flex h-72 items-end pl-8 pr-1 pt-8 pb-12 border rounded-5xl">
            <div>
              <h5 class="text-5xl lg:text-4xl 2xl:text-7xl mb-5">40 000+</h5>
              <span class="block text-coolGray-600">Projects</span>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4">
          <div class="flex h-72 items-end pl-8 pr-1 pt-8 pb-12 border rounded-5xl">
            <div>
              <h5 class="text-5xl lg:text-4xl 2xl:text-7xl mb-5">10 000+</h5>
              <span class="block text-coolGray-600">Units sold</span>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4">
          <div class="flex h-72 items-end pl-8 pr-1 pt-8 pb-12 border rounded-5xl">
            <div>
              <h5 class="text-5xl lg:text-4xl 2xl:text-7xl mb-5">
                <span>9 999+m</span>
                <sup>2</sup>
              </h5>
              <span class="block text-coolGray-600">Designed</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12-mobile py-24-tablet has-background-white">
  <div class="container">
    <div class="has-mw-5xl mx-auto mb-20 px-8 has-text-centered">
      <p class="mb-10 is-size-5 has-text-dark">
        <span>&ldquo;KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span>
        <span></span>
        <span>London, Chicago, Barcelona, Vienna, Las Vegas.</span>
        <span>KW70 Fix initiative seeks out regions and markets with robust underlying catalysts, such as burgeoning technology sectors, a diverse workforce, and a strong entrepreneurial culture.</span>
      </p>
      <a class="button is-ghost px-0" href="#" style="height: 38px;">
        <span class="mr-2">Get to know us</span>
        <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
    <div class="has-mw-sm has-mw-none-widescreen has-mw-2xl-desktop mx-auto">
      <div class="mx-0 columns is-multiline">
        <div class="column is-12 is-3-widescreen is-6-desktop p-0">
          <div class="box pl-8 pb-12 is-flex is-align-items-end" style="height: 290px;">
            <div>
              <h5 class="is-size-3 has-text-dark">700+</h5>
              <span class="is-block has-text-dark">Clients</span>
            </div>
          </div>
        </div>
        <div class="column is-12 is-3-widescreen is-6-desktop p-0">
          <div class="box pl-8 pb-12 is-flex is-align-items-end" style="height: 290px;">
            <div>
              <h5 class="is-size-3 has-text-dark">40 000+</h5>
              <span class="is-block has-text-dark">Projects</span>
            </div>
          </div>
        </div>
        <div class="column is-12 is-3-widescreen is-6-desktop p-0">
          <div class="box pl-8 pb-12 is-flex is-align-items-end" style="height: 290px;">
            <div>
              <h5 class="is-size-3 has-text-dark">10 000+</h5>
              <span class="is-block has-text-dark">Units sold</span>
            </div>
          </div>
        </div>
        <div class="column is-12 is-3-widescreen is-6-desktop p-0">
          <div class="box pl-8 pb-12 is-flex is-align-items-end" style="height: 290px;">
            <div>
              <h5 class="is-size-3 has-text-dark">
                <span>9 999+m</span>
                <sup class="ml-n2">2</sup>
              </h5>
              <span class="is-block has-text-dark">Designed</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="mw-6xl px-8 mb-20 mx-auto text-center">
      <p class="fw-medium fs-4 mb-10"><span >KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span> <span class="fst-italic text-secondary-light" >London, Chicago, Barcelona, Vienna, Rome, Las Vegas.</span> <span >KW70 Fix initiative seeks out regions and markets with robust underlying catalysts, such as burgeoning technology sectors, a diverse workforce, and a strong entrepreneurial culture. Once identified, we aim to bring our extensive knowledge and resources to these carefully chosen areas, partnering with local stakeholders to create a thriving physical environment that promotes growth and prosperity. </span></p><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >Get to know us</span>
        <svg class="rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </div>
    <div class="mw-sm mw-lg-2xl mx-auto mw-xl-none">
      <div class="row mx-0">
        <div class="col-12 col-lg-6 col-xl-3 p-0">
          <div class="d-flex align-items-end ps-8 pe-1 py-12 border" style="border-radius: 60px; height: 290px;">
            <div>
              <h5 class="fs-1 mb-5" >700+</h5><span class="d-block text-secondary-light" >Clients</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 col-xl-3 p-0">
          <div class="d-flex align-items-end ps-8 pe-1 py-12 border" style="border-radius: 60px; height: 290px;">
            <div>
              <h5 class="fs-1 mb-5" >40 000+</h5><span class="d-block text-secondary-light" >Projects</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 col-xl-3 p-0">
          <div class="d-flex align-items-end ps-8 pe-1 py-12 border" style="border-radius: 60px; height: 290px;">
            <div>
              <h5 class="fs-1 mb-5" >10 000+</h5><span class="d-block text-secondary-light" >Units sold</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 col-xl-3 p-0">
          <div class="d-flex align-items-end ps-8 pe-1 py-12 border" style="border-radius: 60px; height: 290px;">
            <div>
              <h5 class="fs-1 mb-5"><span >9 999+m</span><sup class="ms-n2">2</sup></h5><span class="d-block text-secondary-light" >Designed</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>