Page Not Found - Tailwind Component
The HTTP 404 Not Found response status code indicates that the server cannot find the requested resource.
404
Loading component...
60 lines
<section class="m-0 flex flex-col w-full justify-center bg-gray-800 text-gray-100 pb-36">
<nav class="bg-gray-900 shadow dark:bg-gray-800">
<div class="container px-6 py-4 mx-auto">
<div class="lg:flex lg:items-center lg:justify-between">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700">
<a class="text-2xl font-bold text-yellow-500 dark:text-yellow-600 lg:text-3xl hover:text-yellow-500 dark:hover:text-yellow-500"
href="#">Rookie</a>
</div>
<div class="flex lg:hidden">
<button type="button"
class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400"
aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
<path fill-rule="evenodd"
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
</path>
</svg>
</button>
</div>
</div>
<div class="hidden -mx-4 lg:flex lg:items-center">
<a href="#"
class="block mx-4 mt-2 text-sm text-gray-300 capitalize lg:mt-0 dark:text-gray-200 hover:text-yellow-400 dark:hover:text-yellow-600">Home</a>
<a href="#"
class="block mx-4 mt-2 text-sm text-gray-300 capitalize lg:mt-0 dark:text-gray-200 hover:text-yellow-400 dark:hover:text-yellow-600">Product</a>
<a href="#"
class="block mx-4 mt-2 text-sm text-gray-300 capitalize lg:mt-0 dark:text-gray-200 hover:text-yellow-400 dark:hover:text-yellow-600">Performance</a>
<a href="#"
class="block mx-4 mt-2 text-sm text-gray-300 capitalize lg:mt-0 dark:text-gray-200 hover:text-yellow-400 dark:hover:text-yellow-600">Contact</a>
</div>
</div>
</div>
</nav>
<div class="my-auto md:text-left text-center">
<img src="https://i.imgur.com/U3vTGjX.png" class="w-52 md:mx-72 mb-4 mt-12 mx-auto" alt="">
<h1 class="text-5xl md:text-6xl mx-auto md:mx-48 ">
There’s a Leak<br />
<span class="text-teal-400">in the Website</span>
</h1>
<div class="mx-8 md:mx-2">
<a class="inline-flex w-full mt-6 md:w-auto mb-4 md:mr-6 py-3 px-8 text-sm font-bold uppercase mx-auto md:mx-48 border-2 border-transparent bg-yellow-400 items-center hover:bg-yellow-500 text-gray-800 transition duration-200"
href="#">
Back to Home
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
</section>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
body {
font-family: 'Inter', sans-serif;
}
</style>