404 Page Example

This tailwind example is contributed by Brandon D, on 03-Sep-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are 404 Pages, Not found,404 pages,Not found

Error Page 404 Page

Author Brandon D

Tailwind v3.4 13.4k 13

Fork Fullscreen

<main class="flex items-center justify-center w-full min-h-screen py-8 text-gray-900 page md:py-16 ">
    <div class="relative flex flex-col items-center w-full gap-8 px-8 md:px-18 xl:px-40 md:gap-16">
        <h1 class="text-9xl md:text-[300px] w-full select-none  text-center font-black  text-gray-400">
            404</h1>
        <p class="text-3xl font-bold capitalize">You have discovered a secret place</p>
        <p class="text-2xl font-medium break-words text-dull">Unfortunately, this is only a 404 page. You may have
            mistyped the address, or the page has been moved to another URL.</p>
        <div class="flex flex-col justify-between w-full gap-8 md:flex-row md:gap-32 xl:px-16">
            <a to="/"
                class="flex items-center justify-center w-full gap-4 p-3 font-semibold capitalize border-2 border-blue-500 rounded shadow-lg md:w-fit hover:bg-blue-500 md:p-6 focus:outline-none hover:scale-105 active:scale-90 hover:shadow-xl ">
                <span class="rotate-180 material-symbols-outlined">arrow_right_alt</span>
                Go back to Previous Page
            </a>
            <a to="/"
                class="rounded flex w-full md:w-fit group items-center gap-4 justify-center border-2 border-green-500 font-semibold hover:bg-green-500 p-3 md:p-6 capitalize focus:outline-none hover:scale-105 active:scale-90 shadow-lg hover:shadow-xl ">
                <span class="material-symbols-outlined">home</span>
                Go back to Home Page
            </a>
        </div>
    </div>
</main>

Related Examples

404 Error Page
Minimal 404 for your project

TailwindFlex

4 years ago

22.8k
Simple 404 page template

Livia Flores

3 years ago

14.7k
Minimal 404 page

Santos78

3 years ago

12.6k
Minimal server error page template

Santos78

3 years ago

14.2k
404 page template
Minimal 404-page template for tailwind css

TailwindFlex

3 years ago

13.3k
404 Error Page Example

Orson Kincaid

1 year ago

3.3k
404 Error Page Example

Anonymous

1 year ago

2.3k
404 Error Page Example

Anonymous

1 year ago

2.6k
404 Page
The 404 Page is a responsive and customizable error page designed to inform users when they’ve reached a nonexistent or broken link. This component not only improves user experience but also provides a chance to showcase creativity and guide users back to the right path. Key Features: Fully responsive design that works on all devices. Engaging visuals (customizable images, icons, or animations). Includes a message like "Page Not Found" or "Oops! Something went wrong." Provides helpful navigation options such as a "Go Home" button or links to other pages. Easily customizable for themes, styles, and content.

Abhiraj

1 year ago

3.4k
404 Error
This HTML page displays a 404 error with a 'Back to home' button, styled using Tailwind CSS.

Zayyan Mustafa

1 year ago

1.8k
404 Not Found

Rajesh Maheshwari

1 year ago

2.2k
Page not found
When lost get help to get back home

ORGIN_DREAMS

1 year ago

1.5k