HTTP codes UI Components – Zeus Library

<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="relative lg:py-20 overflow-hidden">
  <img class="lg:absolute lg:top-0 lg:left-0 h-128 lg:h-auto max-h-screen w-full lg:w-5/12 object-cover" 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=334&amp;q=80" alt="">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center">
      <div class="w-full lg:w-7/12 lg:ml-auto mt-12 mb-20 text-center">
        <span class="text-xs font-semibold text-gray-500 uppercase">Error 404</span>
        <h2 class="mt-8 mb-10 text-4xl font-semibold font-heading">Page not found</h2>
        <p class="mb-12 text-xl text-gray-500">Sorry! We are unable to find the page you are looking for</p>
        <div class="flex flex-wrap justify-center"><a class="w-full md:w-auto px-8 py-4 mb-4 md:mb-0 md:mr-4 bg-red-400 hover:bg-red-300 text-sm text-white font-medium leading-normal rounded" href="#">Go back to Homepage</a><a class="w-full md:w-auto px-12 py-4 border hover:border-gray-500 text-sm font-medium leading-normal rounded" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pb-20 py-lg-20"><img class="d-none d-lg-block position-absolute top-0 start-0 h-100 col-lg-5" style="object-fit: cover;" 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="d-lg-none w-100 mb-12" style="object-fit: cover;" 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="container">
    <div class="row">
      <div class="col-12 col-lg-6 ms-auto text-center"><span class="small text-muted fw-bold text-uppercase">Error 404</span>
        <h2 class="mt-8 mb-10">Page not found</h2>
        <p class="mb-12 lead text-muted">Sorry! We are unable to find the page you are looking for</p>
        <div class="d-flex flex-wrap justify-content-center"><a class="btn btn-primary me-4" href="#">Go back to Homepage</a><a class="btn btn-outline-dark" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>