Page not found

When lost get help to get back home

This tailwind example is contributed by ORGIN_DREAMS, on 22-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are 404 Pages, Not found,Front page,404 pages,Not found

Error Page Landing Page 404 Page

Author ORGIN_DREAMS

Tailwind v3.4 1.5k 6

Fork Fullscreen

<main class="flex flex-1 items-center justify-center px-6 py-24 sm:py-32 lg:px-8">
    <div class="text-center max-w-md">
      <p class="text-base font-semibold text-green-600">404</p>
      <h1 class="mt-4 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">
        Page not found
      </h1>
      <p class="mt-6 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">
        Sorry, we couldn’t find the page you’re looking for.
      </p>
      <div class="mt-10 flex items-center justify-center gap-x-6">
        <a
          href="/"
          class="rounded-md bg-green-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-green-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
        >
          Go back home
        </a>
        <a href="/Contact" class="text-sm font-semibold text-gray-900">
          Contact support <span aria-hidden="true">&rarr;</span>
        </a>
      </div>
    </div>
  </main>
</div>

Related Examples

404 Error Page
Minimal 404 for your project

TailwindFlex

4 years ago

22.8k
404 Page Example

Brandon D

4 years ago

13.4k
Minimal server error page template

Santos78

3 years ago

14.2k
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
Animated 404 Error Page Section
A modern and minimal 404 error page section built with Tailwind CSS and Alpine.js. This component features a smooth fade-in animation triggered on page load, a bold 404 error code, a short message, and a primary call-to-action button guiding users back to the homepage. ✨ Key Features: Smooth fade & slide-in animation using Alpine.js Fully responsive and optimized for mobile and dark mode Clean Tailwind CSS styling for easy customization Includes a call-to-action button for better UX Perfect for: landing pages, web apps, and portfolios that need a polished “Page Not Found” experience.

wavy kits

11 months ago

889
404 - Page Not Found
404 - Page Not Found

Tanvir Hasan Bappy (Tanvir)

8 months ago

485
django error
django error

Omer fils ELENGA

8 months ago

524