Home
Brandon D
404 Page Example

404 Page Example

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

Error Page 404 Page

Author Brandon D

12.6k

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

Author:
TailwindFlex

3 years ago

21.7k
Simple 404 page template

Author:
Livia Flores

2 years ago

13.8k
Minimal 404 page

Author:
Santos78

2 years ago

11.4k
Minimal server error page template

Author:
Santos78

2 years ago

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

Author:
TailwindFlex

2 years ago

12.5k
404 Error Page Example

Author:
Orson Kincaid

1 year ago

2.1k
404 Error Page Example

Author:
Anonymous

11 months ago

1.6k
404 Error Page Example

Author:
Anonymous

11 months ago

1.5k
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.

Author:
Abhiraj

9 months ago

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

Author:
Zayyan Mustafa

9 months ago

940
404 Not Found

Author:
Rajesh Maheshwari

8 months ago

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

Author:
ORGIN_DREAMS

5 months ago

635

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components