<section class="relative lg:py-20">
<img class="lg:absolute lg:top-0 lg:left-0 h-112 w-full lg:w-5/12 mb-12 lg:mb-0 object-cover" src="mockup-assets/images/gray-500-square.png" alt="">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-7/12 lg:ml-auto my-12 text-center">
<span class="text-xs font-bold text-gray-200 uppercase">Error 404</span>
<h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading">Page not found</h2>
<p class="mb-6 text-lg text-gray-500 leading-loose">Sorry! We are unable to find the page you are looking for</p>
<div class="flex flex-wrap justify-center"><a class="px-6 py-2 mr-4 bg-gray-500 hover:bg-gray-600 text-sm leading-loose text-gray-50 font-semibold rounded" href="#">Go back to Homepage</a><a class="px-6 py-2 border hover:border-gray-400 text-sm font-semibold leading-loose rounded" href="#">Try Again</a></div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
