404 Error Page

This tailwind example is contributed by JUGENDRA GANGWAR, on 29-Sep-2026. 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 JUGENDRA GANGWAR

Tailwind v3.4 2

Fork Fullscreen

<div class="min-h-screen bg-gradient-to-br from-slate-100 via-white to-indigo-100 flex items-center justify-center p-6">
  <div class="w-full max-w-5xl">
    <div class="overflow-hidden rounded-[32px] border border-white/70 bg-white/80 shadow-2xl backdrop-blur-xl">
      <div class="grid lg:grid-cols-2 items-center">
        <div class="p-8 sm:p-12 lg:p-14">
          <span class="inline-flex items-center rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-indigo-700">
            Error 404
          </span>
          <h1 class="mt-6 text-6xl font-black leading-none text-slate-900 sm:text-7xl">
            404
          </h1>
          <h2 class="mt-4 text-3xl font-bold text-slate-900">
            Page Not Found
          </h2>
          <p class="mt-4 text-base leading-7 text-slate-500">
            The page you're looking for doesn't exist or may have been moved.
            Don't worry — you can head back to the homepage or continue browsing.
          </p>
          <div class="mt-8 flex flex-col gap-3 sm:flex-row">
            <a href="#" class="inline-flex items-center justify-center rounded-xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-slate-800">
              Go Home
            </a>
            <a href="#" class="inline-flex items-center justify-center rounded-xl border border-slate-200 bg-white px-6 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
              Contact Support
            </a>
          </div>
          <div class="mt-8 flex items-center gap-2 text-sm text-slate-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
            </svg>
            Return to previous page
          </div>
        </div>
        <div class="relative flex items-center justify-center p-8 lg:p-12">
          <div class="absolute h-72 w-72 rounded-full bg-indigo-200/50 blur-3xl"></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.5k
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
Page not found
When lost get help to get back home

ORGIN_DREAMS

1 year ago

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

891
404 - Page Not Found
404 - Page Not Found

Tanvir Hasan Bappy (Tanvir)

9 months ago

592