Http Codes Components in Asitrastudio library

<section class="py-10 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-2">
      <div class="w-full lg:w-1/2 px-2 mb-4 lg:mb-0">
        <div class="py-20 px-8 sm:px-20 bg-white rounded-4xl">
          <div class="max-w-2xl mx-auto">
            <div class="max-w-md mb-20 lg:mb-32">
              <span class="inline-block mb-4 py-2 px-3 text-sm text-black leading-none border-1.5 border-black rounded-full transition duration-200">Error</span>
              <h2 class="font-heading text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-6">Error 404</h2>
              <p class="text-coolGray-60 mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
              <a class="group inline-flex py-5 px-8 items-center justify-center leading-none font-medium text-black hover:text-white border border-black rounded-full hover:bg-black transition duration-200" href="#">
                <span class="mr-2">Back to homepage</span>
                <span class="group-hover:rotate-45 transform transition duration-100">
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 1L1 9" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M9 8.33571V1H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </a>
            </div>
            <div class="max-w-xs ml-auto text-right">
              <span class="block mb-3 text-sm">2023</span>
              <p class="text-coolGray-600">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-5/12 lg:w-2/12 px-2">
        <img class="w-full h-96 sm:h-112 md:h-150 lg:h-full rounded-4xl object-cover" src="asitrastudio-assets/http-codes/photo-sm.png" alt="">
      </div>
      <div class="w-7/12 lg:w-4/12 px-2">
        <img class="w-full h-96 sm:h-112 md:h-150 lg:h-full rounded-4xl object-cover" src="asitrastudio-assets/http-codes/photo-lg.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="section py-10 has-background-white-ter">
  <div class="container">
    <div class="-mx-2 columns is-mobile is-multiline">
      <div class="column is-12-mobile is-12-tablet is-6-desktop px-2">
        <div class="is-fullheight px-8 px-20-tablet py-20 has-background-white" style="border-radius: 40px;">
          <div class="has-mw-md mx-auto">
            <div class="mb-32">
              <span class="tag is-light mb-4 has-text-dark">Error</span>
              <h2 class="title is-size-2 is-size-1-desktop mb-10" style="letter-spacing: -0.02em;">Error 404</h2>
              <p class="subtitle mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
              <a class="button is-outlined is-dark is-rounded" href="#">
                <span class="mr-2">Back to homepage</span>
                <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
            <div class="has-mw-xs ml-auto has-text-right">
              <span class="is-block is-size-7 has-text-dark">2023</span>
              <p class="has-text-grey">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-5-mobile is-4-tablet is-2-desktop px-2">
        <img class="image is-fullwidth is-covered" src="asitrastudio-assets/http-codes/photo-sm.png" alt="" style="border-radius: 40px; height: 100%">
      </div>
      <div class="column is-7-mobile is-8-tablet is-4-desktop px-2">
        <img class="image is-fullwidth is-covered" src="asitrastudio-assets/http-codes/photo-lg.png" alt="" style="border-radius: 40px; height: 100%">
      </div>
    </div>
  </div>
</section>

<section class="py-10 bg-light-light">
  <div class="container">
    <div class="row mx-n2">
      <div class="col-12 col-lg-6 mb-4 mb-lg-0 px-2">
        <div class="py-20 px-8 px-sm-20 bg-white rounded-5">
          <div class="mw-2xl mx-auto">
            <div class="mw-md mb-32"><span class="badge mb-4 border border-dark" >Error</span>
              <h2 class="mb-6" >Error 404</h2>
              <p class="text-light-dark mb-10" >
                It is a long established fact that a reader will be distracted by the readable content
                of a page when looking at its
                layout.
              </p><a class="btn btn-outline-dark" href="#"><span class="me-2" >Back to homepage</span>
                <svg class="rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></a>
            </div>
            <div class="mw-xs ms-auto text-end"><span class="d-block fs-9" >2023</span>
              <p class="text-light-dark mb-0" >
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
                layout.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-5 col-lg-2 px-2"><img class="img-fluid w-100 h-100 rounded-5" src="asitrastudio-assets/http-codes/photo-sm.png" alt=""/></div>
      <div class="col-7 col-lg-4 px-2"><img class="img-fluid w-100 h-100 rounded-5" src="asitrastudio-assets/http-codes/photo-lg.png" alt=""/></div>
    </div>
  </div>
</section>