Bulma HTTP codes Components

<section class="has-background-white py-24 is-clipped">
    <div class="container px-8">
        <div class="columns">
            <div class="column is-6">
                <div class="is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%;">
                    <div class="mb-8">
                        <h2 class="mb-6 title has-text-link has-text-weight-bold" style="font-size: 160px;">404</h2>
                        <h3 class="mb-4 has-text-dark is-size-4 has-text-weight-bold">Something is wrong!</h3>
                        <p class="has-text-grey has-text-weight-medium">The page you are looking for is not found! Try something else or go back to homepage.</p>
                    </div>
                    <div>
                        <a class="is-inline-flex is-align-items-center has-text-centered has-text-weight-semibold has-text-link" href="#">
                            <svg class="mr-2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M6.66667 12.6667L2 8.00004M2 8.00004L6.66667 3.33337M2 8.00004L14 8.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <span>Go Back to Homepage</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="column is-6">
                <img class="mx-auto" src="flaro-assets/images/http-codes/illustration.png" alt="">
            </div>
        </div>

<section class="is-relative pb-20 py-20-desktop">
  <img class="is-absolute is-top-0 is-left-0 is-hidden-touch column is-5 p-0 is-cover" style="height: 100%;" src="https://images.unsplash.com/photo-1544717305-996b815c338c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
  <img class="is-hidden-desktop mb-12 image is-fullwidth is-cover" style="height: 20rem;" src="https://images.unsplash.com/photo-1544717305-996b815c338c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
  <div class="section py-0">
    <div class="container">
      <div class="columns">
        <div class="column is-12 is-6-desktop ml-auto">
          <div class="has-mw-md mx-auto has-text-centered">
            <span class="has-text-grey-dark has-text-weight-semibold">Error 404</span>
            <h2 class="mt-8 mb-10 title is-2">Page not found</h2>
            <p class="mb-12 is-size-5 has-text-grey-dark">Sorry! We are unable to find the page you are looking for</p>
            <div class="buttons is-centered"><a class="button is-primary" href="#">Go back to Homepage</a><a class="button is-outlined is-light has-text-dark" href="#">Try Again</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pb-20 has-background-light">
  <div class="section py-10 has-background-light">
    <div class="container">
      <a class="is-inline-block is-size-6" href="#">
        <img class="image" src="yofte-assets/logos/yofte-logo.svg" alt="">
      </a>
    </div>
  </div>
  <div class="section py-20 py-32-tablet is-relative has-background-white" style="background-image: url('yofte-assets/elements/lines-color2.svg'); background-size: contain; background-repeat: no-repeat;" alt="">
    <div class="container">
      <div class="has-mw-md">
        <h2 class="title has-leading-2 mb-8 has-background-white">Sorry, we can&rsquo;t find that page or something has gone wrong</h2>
        <p class="subtitle mb-8 mb-16-tablet">Checkout for any URL misspelling.</p>
        <a class="button is-primary" href="#">Homepage</a>
      </div>
    </div>
  </div>
</section>

<section class="section py-24">
  <div class="container">
    <div class="is-flex is-relative is-align-items-center">
      <div class="has-mw-sm has-mw-2xl-tablet mx-auto is-relative" style="z-index: 3;">
        <h3 class="title is-size-2 has-text-primary mb-12">Error 404</h3>
        <h4 class="title is-size-2-mobile is-size-1-tablet mb-12">Sorry, we can't find that page or something has gone wrong...</h4>
        <a class="button is-dark" href="#">Go back to Homapage</a>
      </div>
      <img class="is-absolute is-top-0 is-bottom-0 is-left-0" style="object-fit: contain; height: 100%" src="pstls-assets/images/http-codes/404.png" alt="">
      <img class="is-absolute is-top-0 is-right-0" src="pstls-assets/images/http-codes/http-codes-shadow.png" alt="" style="height: 100%">
    </div>
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column mb-12 mb-0-tablet">
        <small class="is-block is-uppercase has-leading-4 has-text-weight-semibold mb-2">
          <span>Error</span>
          <span class="has-text-primary">404</span>
        </small>
        <h2 class="title">Page not found</h2>
        <p class="subtitle mb-10">Sorry! We are unable to find the page you are looking for</p>
        <div class="buttons"><a class="button is-primary mr-4" href="#">Go back to home page</a><a class="button is-dark is-outlined" href="#">Try again</a></div>
      </div>
      <div class="column">
        <img class="image mx-auto" src="acros-assets/images/http-codes/robot.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="is-relative">
  <div class="is-hidden-mobile is-absolute is-top-0 is-left-0 has-mw-xs-mobile has-mw-md-tablet has-mw-3xl-widescreen has-mw-4xl-fullhd p-0 clip-path-right-top" style="z-index: 1; height: 100%;">
    <img class="image" style="height: 100%; object-fit: cover;" src="bendis-assets/images/red-image.png" alt="">
  </div>
  <div class="section pt-40 pb-0 py-52-tablet">
    <div class="container">
      <div class="has-mw-sm mx-auto-mobile ml-auto pl-20-tablet-only">
        <h2 class="title is-size-3 has-leading-3 has-text-primary">Page not found</h2>
        <p class="has-mw-xs subtitle is-size-5 mt-2 mb-5">Sorry! We are unable to find the page you are looking for</p>
        <div class="buttons"><a class="button is-warning" href="#">Go to back home</a><a class="button is-outlined is-primary" href="#">Try again</a></div>
      </div>
    </div>
  </div>
  <div class="is-hidden-tablet mt-20 clip-path-right-top" style="z-index: 1; height: 360px;">
    <img class="image" style="height: 100%; object-fit: cover;" src="bendis-assets/images/red-image.png" alt="">
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="is-max-w-md mx-auto has-text-centered">
      <img class="mb-5 is-fullwidth p-4" src="metis-assets/illustrations/error1.png" alt="">
      <span class="title has-text-primary">Whoops!</span>
      <h2 class="title is-spaced">Something went wrong!</h2>
      <p class="subtitle">Sorry, but we are unable to open this page.</p>
      <div class="buttons is-centered"><a class="button is-primary" href="#">Go back to Homepage</a><a class="button is-light" href="#">Try Again</a></div>
    </div>
  </div>
</section>

<section class="section py-0-desktop is-relative is-clipped">
  <div class="column is-6-desktop is-absolute is-flex-desktop is-hidden-touch is-top-0 is-left-0 is-justify-content-center is-align-items-center is-cover" style="height: 100%">
    <img class="image is-fullwidth" style="object-fit: contain; max-height: 380px;" src="cronos-assets/images/example-scene2.png" alt="">
  </div>
  <div class="py-6 is-hidden-widescreen">
    <img class="mx-auto is-block is-hidden-widescreen image is-fullwidth" style="object-fit: contain; max-height: 360px;" src="cronos-assets/images/example-scene2.png" alt="">
  </div>
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop ml-auto py-64-desktop pt-32 pb-40 is-relative has-text-centered">
        <img class="is-absolute is-bottom-0 is-left-0" style="height: 80px;" src="cronos-assets/elements/light-green-left.svg" alt="">
        <img class="is-absolute is-top-0 is-left-0" style="height: 80px;" src="cronos-assets/elements/green-light-left.svg" alt="">
        <img class="is-absolute is-top-0 is-right-0" style="height: 80px;" src="cronos-assets/elements/light-green-small.svg" alt="">
        <img class="is-absolute is-bottom-0 is-right-0" style="height: 80px;" src="cronos-assets/elements/light-green-right.svg" alt="">
        <span class="tag is-warning is-light">Error 404</span>
        <h2 class="mt-4 mb-3 title is-size-2 is-spaced">Page not found</h2>
        <p class="subtitle mb-6">Sorry! We are unable to find the page you are looking for</p>
        <div class="buttons is-centered"><a class="button is-primary" href="#">Go back to Homepage</a><a class="button is-dark" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

<section class="section is-relative">
  <img class="column is-6 is-hidden-touch" style="position: absolute; top: 0; left: 0; object-fit: cover; height: 100%" src="bulma-plain-assets/images/green-400-square.png" alt="">
  <img class="is-hidden-desktop is-fullwidth" style="max-height: 512px; width: 100%; object-fit: cover;" src="bulma-plain-assets/images/green-400-square.png" alt="">
  <div class="container py-6">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop ml-auto has-text-centered">
        <span class="has-text-grey-dark">Error 404</span>
        <h2 class="mt-2 mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Page not found</h2>
        <p class="subtitle has-text-grey mb-6">Sorry! We are unable to find the page you are looking for</p>
        <div class="buttons is-centered"><a class="button is-primary" href="#">Go back to Homepage</a><a class="button" href="#">Try Again</a></div>
      </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>