<section class="pt-16 pb-44 bg-gray-50 overflow-hidden">
<div class="relative container mx-auto px-4"><img class="absolute top-0 left-0" src="gradia-assets/elements/http-codes/radial.svg" alt="">
<div class="relative z-10"><img class="mb-36" src="gradia-assets/logos/gradia-name-black.svg" alt="">
<h2 class="mb-32 max-w-max font-heading font-bold text-15xl text-transparent bg-clip-text bg-gradient-orange" >404</h2>
<div class="md:max-w-xl">
<p class="mb-6 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Nothing found</p>
<h2 class="mb-5 font-heading font-bold text-6xl sm:text-7xl text-gray-900" >The page you are looking for is not available!</h2>
<p class="mb-11 text-gray-600 text-lg" >Try something different or go back to the homepage.</p>
<button class="group relative font-heading py-5 px-9 block w-full md:w-auto text-xs text-white font-semibold uppercase bg-gray-900 overflow-hidden rounded">
<div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full transition ease-in-out duration-500 bg-gray-800"></div>
<p class="relative z-10" >Go back to Homepage</p>
</button>
</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
