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

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.8k
Simple 404 page template

Author:
Livia Flores

2 years ago

14k
Minimal 404 page

Author:
Santos78

2 years ago

11.4k
Minimal server error page template

Author:
Santos78

2 years ago

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

Author:
TailwindFlex

2 years ago

12.6k
404 page with a purple background
Here's an updated version of the 404 page with a purple background

Author:
zobaidul kaziex

1 year ago

1.5k
404 Page Not Found

Author:
KULDEEP

5 months ago

789
File Not Found
This is a simple not found section for file, with full responsiveness and dark mode supported

Author:
Shariar Hasan

1 year ago

2.9k
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

10 months ago

1.7k
404 Page

Author:
ariaw

7 months ago

684
Beautiful 404 page
404 page with background image

Author:
Nikolai

1 year ago

3.3k
exampleerror

Author:
John Connor

6 months ago

555

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components