<section class="py-24 bg-black overflow-hidden">
<div class="container mx-auto px-4">
<div class="max-w-xl mx-auto text-center">
<a class="inline-block mb-10 md:mb-24" href="#">
<img class="h-8" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
</a>
<div class="relative flex items-center justify-center mb-24">
<img class="absolute -top-1/2 -left-1/2 h-128" src="boldui-assets/elements/shadow-blue-pricing.svg" alt="">
<img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/404.svg" alt="">
<div class="relative clip-path transform rotate-45">
<img class="h-52 md:h-80 w-40 md:w-64 object-cover transform -rotate-45" src="boldui-assets/images/placeholder3.png" alt="">
</div>
</div>
<div class="flex flex-wrap items-center justify-center">
<a class="inline-flex w-full md:w-auto mb-6 md:mb-0 md:mr-8 items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
<svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
</svg>
<span class="text-sm font-heading">Back to home</span>
</a>
<a class="inline-flex items-center text-white hover:underline" href="#">
<span class="mr-2 text-sm font-heading">Try again</span>
<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
</svg>
</a>
</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
