404 and Error Page Design Patterns with Tailwind

1. Why a 404 page needs more than an error message

A user usually lands on a 404 page through an outdated bookmark, a typo in the URL, or a broken external link from another site, rarely through any fault of their own. A bare message like '404 Not Found' correctly states what technically happened, but it does nothing to help the user actually reach what they were originally looking for.

A well-designed error page instead removes the confusion by explaining, in plain language, that the requested page doesn't exist, and immediately offers next steps. That includes links to the homepage, frequently visited sections, and an embedded search, so a wrong click doesn't automatically mean the user bounces off the entire site.

2. The design difference between 404 (not found) and 500 (server error)

A 404 means the requested resource simply doesn't exist; here the page can actively suggest where the user might want to go instead, because the rest of the system is working fine. A 500 means something is actually broken on the server; here dynamic content like personalized suggestions or a live search should be avoided, since those very systems might be the cause of the failure.

Color and tone should ideally differ between the two as well: a 404 page can stay calm, almost casual, since there's no real system problem, while a 500 page should carry a somewhat more serious, transparent tone with a clear support contact and, ideally, an error ID for the support team.

3. Building a 404 page with Tailwind: structure and components

The structure usually follows the same pattern as an empty state: a large but not overwhelming visual marker for the error number, a short, plain-language explanation, and below that several clearly separated actions. It matters that the main call-to-action ('Back to homepage') stands out visually from secondary links ('Contact support', 'Popular pages'), so the user doesn't have to weigh options that all look equally important.

The whole page should keep the same header and footer as the rest of the site despite the error state, so basic navigation stays available even if the user doesn't want to use any of the suggested actions. That familiar navigation frame subconsciously signals that this is just a single broken link, not a fundamental problem with the site.

<main class="mx-auto flex min-h-[70vh] max-w-2xl flex-col items-center justify-center px-6 text-center">
  <p class="text-sm font-semibold text-indigo-600">Error 404</p>
  <h1 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
    This page doesn't exist
  </h1>
  <p class="mt-4 max-w-md text-base text-gray-500">
    The link is either outdated or the address has a typo.
    Use search or one of the options below to get back on track.
  </p>
  <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
    <a href="/" class="rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500">
      Back to homepage
    </a>
    <a href="/search" class="rounded-md border border-gray-300 px-4 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-50">
      Search the site
    </a>
    <a href="/contact" class="text-sm font-semibold text-gray-700 hover:text-indigo-600">
      Contact support <span aria-hidden="true">→</span>
    </a>
  </div>
</main>

4. Navigation back to the homepage and an embedded search

An embedded search bar directly on the 404 page is significantly more effective than a single link to the homepage, because it lets the user formulate their original goal directly, without a detour through the site's regular navigation. The search field should be auto-focused, or at least visually prominent, so it reads as the obvious solution.

A list of the most visited pages or categories as extra links can additionally help on content-heavy sites like blogs or online stores, since it offers the user concrete, topically relevant alternatives instead of making them start over entirely from the homepage.

5. Keeping brand identity on error pages

Many frameworks ship a generic error page with zero branding by default, which quickly makes a user feel like they've been redirected entirely away from the actual site. Logo, brand colors, and the same typography as the rest of the site should therefore carry through consistently on the error page too, even though the technical error handling behind it works completely differently.

A consistent look subconsciously signals to the user that the site, despite the one error, is fundamentally functional and trustworthy. A visual break, like a plain white page with no styling at all, instead reinforces the impression of a bigger, sitewide problem, even when technically only a single link led nowhere.

6. A practical Symfony example: wiring up custom error page templates

In Symfony, custom error pages can be wired up through templates in the folder templates/bundles/TwigBundle/Exception/, where the filename follows the HTTP status code, like error404.html.twig for all 404 errors and error500.html.twig for server errors. Symfony picks up these files automatically and renders them instead of the built-in default error page whenever the matching status code fires.

It's important that the Twig template for the 500 error page carries as few external dependencies as possible, like database queries or service calls, because those very services might no longer be working at the moment a server error occurs. Static content and already-compiled Tailwind CSS through a standalone, minimal layout are the safer choice here than fully including the regular page layout.

{# templates/bundles/TwigBundle/Exception/error404.html.twig #}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page not found</title>
  <link rel="stylesheet" href="{{ asset('build/app.css') }}">
</head>
<body class="bg-white">
  <main class="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center px-6 text-center">
    <p class="text-sm font-semibold text-indigo-600">Error 404</p>
    <h1 class="mt-2 text-4xl font-bold text-gray-900">This page doesn't exist</h1>
    <p class="mt-4 text-base text-gray-500">
      The link is outdated or misspelled.
    </p>
    <a href="{{ path('app_home') }}"
      class="mt-8 rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500">
      Back to homepage
    </a>
  </main>
</body>
</html>

7. Popular links and product suggestions on the error page

For an online store, the 404 page can additionally show a handful of popular or currently discounted products, turning a lost visit into a remaining chance at conversion. These product suggestions should be technically decoupled from the routing itself, so a failure in the product query doesn't accidentally crash the error page as well.

For content sites, the most recently published articles or the most-read posts from the past week make better suggestions instead, since they're topically close to what a user may have originally been looking for. Either way, keep this list short: three to five entries is enough, so the error page itself doesn't end up feeling cluttered again.

8. Tracking and prioritizing 404 errors in monitoring

Every 404 hit should be logged server-side, including the requested URL and, when available, the referrer URL, so broken internal links can be systematically tracked down. The same 404 URLs often show up repeatedly because an internal link in the footer or navigation itself is broken, which a simple frequency analysis of the log quickly reveals.

For externally linked but since-removed pages, a permanent 301 redirect to the closest matching, still-existing page is often worth setting up instead of just showing a 404, since it guides both users and search engine crawlers straight to relevant content instead of letting the original link go to waste.

9. A checklist for your own error page

A good error page has four fixed components: a clear, plain-language explanation without technical jargon, a visually prominent main action back to the homepage or search, visible brand identity through logo and colors, and, for 500 errors, an error ID for the support contact. Missing any one of these four pieces wastes part of the page's potential to keep the user on the site after all.

Before going live, it's worth deliberately testing every status code in a local environment, since 404 and 500 pages are rarely triggered manually in everyday use, letting styling bugs go unnoticed for a long time. A quick check in both light and dark mode belongs in that review too, since error pages are often the last thing considered in the design process.

10. Summary

11. FAQ: 404 Error Pages with Tailwind: Key Takeaways