404 Pages
Choose from a collection of 404 "not found" landing pages coded with Tailwind CSS to show your website visitors when a page is unavailable or doesn't exist.
Default example
Use this free example of a 404 "not found" page coded with Tailwind CSS and Flowbite when a user visits a page that doesn't exist with a button back to the homepage.
Default example
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<h1
class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500"
>
404
</h1>
<p
class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white"
>
Something's missing.
</p>
<p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
Sorry, we can't find that page. You'll find lots to explore on the home
page.
</p>
<a
href="#"
class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4"
>Back to Homepage</a
>
</div>
</div>
</section>
<!-- Block end -->Search bar with card links
This example of a 404 page can be used to attempt to convince the user that couldn't find a page to keep searching for other resources before leaving your website.
Search bar with card links
html
<!-- Block start -->
<section class="bg-gray-50 dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<h1 class="mb-4 text-4xl tracking-tight font-extrabold text-primary-600">
404 Not Found
</h1>
<p class="mb-8 font-medium text-gray-500 sm:text-2xl dark:text-gray-400">
Whoops! That page doesn’t exist.
</p>
<form action="#" method="post">
<div
class="items-center mx-auto mb-3 space-y-4 max-w-screen-sm sm:flex sm:space-y-0"
>
<div class="relative mr-3 w-full">
<label
for="member_email"
class="hidden mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
>Email address</label
>
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"
></path>
</svg>
</div>
<input
class="block p-3 pl-10 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="e.g. Flowbite, components"
type="email"
id="member_email"
required=""
/>
</div>
<div>
<button
type="submit"
class="py-3 px-5 w-full text-sm font-medium text-center text-white rounded-lg cursor-pointer bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Submit
</button>
</div>
</div>
</form>
</div>
<div class="grid gap-6 mt-8 lg:mt-12 sm:grid-cols-2 lg:grid-cols-4">
<a
href="#"
class="p-6 text-center bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 hover:shadow-lg"
>
<div
class="flex justify-center items-center mx-auto mb-4 w-10 h-10 rounded-lg bg-primary-100 dark:bg-primary-900 lg:h-12 lg:w-12"
>
<svg
class="w-5 h-5 text-primary-600 dark:text-primary-400 lg:w-6 lg:h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
></path>
</svg>
</div>
<h3
class="mb-2 text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400"
>
Homepage
</h3>
</a>
<a
href="#"
class="p-6 text-center bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 hover:shadow-lg"
>
<div
class="flex justify-center items-center mx-auto mb-4 w-10 h-10 bg-teal-100 rounded-lg dark:bg-teal-900 lg:h-12 lg:w-12"
>
<svg
class="w-5 h-5 text-teal-600 lg:w-6 lg:h-6 dark:text-teal-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"
></path>
</svg>
</div>
<h3
class="mb-2 text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400"
>
Library
</h3>
</a>
<a
href="#"
class="p-6 text-center bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 hover:shadow-lg"
>
<div
class="flex justify-center items-center mx-auto mb-4 w-10 h-10 bg-purple-100 rounded-lg dark:bg-purple-900 lg:h-12 lg:w-12"
>
<svg
class="w-5 h-5 text-purple-600 dark:text-purple-400 lg:w-6 lg:h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"
></path>
</svg>
</div>
<h3
class="mb-2 text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400"
>
Knowledge Center
</h3>
</a>
<a
href="#"
class="p-6 text-center bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 hover:shadow-lg"
>
<div
class="flex justify-center items-center mx-auto mb-4 w-10 h-10 bg-green-100 rounded-lg dark:bg-green-900 lg:h-12 lg:w-12"
>
<svg
class="w-5 h-5 text-green-600 dark:text-green-400 lg:w-6 lg:h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
clip-rule="evenodd"
></path>
<path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
</svg>
</div>
<h3
class="mb-2 text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400"
>
Blog
</h3>
</a>
</div>
</div>
</section>
<!-- Block end -->Illustration with links
Use this example to also show a beautiful illustration or image when a user can't find a page on your website.
Illustration with links
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<img
class="mx-auto mb-4"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/404/404-computer.svg"
alt="404 Not Found"
/>
<h1
class="mb-4 text-2xl font-extrabold text-primary-600 dark:text-primary-500"
>
404 Not Found
</h1>
<p
class="mb-10 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white"
>
Whoops! That page doesn’t exist.
</p>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Here are some helpful links instead:
</p>
<ul
class="flex justify-center items-center space-x-4 text-gray-500 dark:text-gray-400"
>
<li>
<a
href="#"
class="underline hover:text-gray-900 dark:hover:text-white"
>Home</a
>
</li>
<li>
<a
href="#"
class="underline hover:text-gray-900 dark:hover:text-white"
>Search</a
>
</li>
<li>
<a
href="#"
class="underline hover:text-gray-900 dark:hover:text-white"
>Help</a
>
</li>
<li>
<a
href="#"
class="underline hover:text-gray-900 dark:hover:text-white"
>Contact</a
>
</li>
</ul>
</div>
</div>
</section>
<!-- Block end -->