Error Page Components

Beautiful, responsive error and 404 page components built with TailwindCSS. Perfect for empty states, not found pages, and error handling. Copy, paste, and customize for React, Vue, or HTML.

1) Simple 404

Clean, centered “Not Found” with two actions.

404

The page you’re looking for doesn’t exist or has been moved.

Go Home Contact Support 
<div class="text-center max-w-xl mx-auto">
  <div class="mb-3 inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-violet/10 border border-violet/20">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-violet" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
    </svg>
  </div>
  <h3 class="text-4xl font-extrabold">404</h3>
  <p class="mt-2 text-gray-600">The page you’re looking for doesn’t exist or has been moved.</p>
  <div class="mt-6 flex items-center justify-center gap-3">
    <a href="/" class="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10 hover:brightness-95">Go Home</a>
    <a href="/components/contact" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Contact Support</a>
  </div>
</div>
<template>
  <div class="text-center max-w-xl mx-auto">
    <div class="mb-3 inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-violet/10 border border-violet/20">⚠️</div>
    <h3 class="text-4xl font-extrabold">404</h3>
    <p class="mt-2 text-gray-600">The page you’re looking for doesn’t exist or has been moved.</p>
    <div class="mt-6 flex items-center justify-center gap-3">
      <RouterLink to="/" class="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10 hover:brightness-95">Go Home</RouterLink>
      <RouterLink to="/components/contact" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Contact Support</RouterLink>
    </div>
  </div>
</template>
<script setup>
// No state needed
</script>
import React from 'react'
export default function Simple404(){
  return (
    <div className="text-center max-w-xl mx-auto">
      <div className="mb-3 inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-violet/10 border border-violet/20">⚠️</div>
      <h3 className="text-4xl font-extrabold">404</h3>
      <p className="mt-2 text-gray-600">The page you’re looking for doesn’t exist or has been moved.</p>
      <div className="mt-6 flex items-center justify-center gap-3">
        <a href="/" className="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10 hover:brightness-95">Go Home</a>
        <a href="/components/contact" className="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Contact Support</a>
      </div>
    </div>
  )
}

2) Illustrated 404

Two-column card with an inline SVG illustration (no external image).

Error 404

We can’t find that page

The URL may be incorrect or the page has moved. Try going back or explore one of these links.

Home Components Contact 
<div class="grid md:grid-cols-2 gap-6 items-center">
  <div class="relative overflow-hidden rounded-2xl border border-black/10">
    <div class="absolute inset-0 bg-gradient-to-br from-violet/20 via-blue-200/30 to-fuchsia-200/30"></div>
    <svg viewBox="0 0 300 200" class="relative block w-full h-56">
      <circle cx="110" cy="90" r="42" stroke="#6B5BFF" stroke-width="6" fill="none"/>
      <rect x="145" y="120" width="70" height="10" rx="5" fill="#6B5BFF" opacity=".25"/>
      <circle cx="210" cy="115" r="24" stroke="#6B5BFF" stroke-width="6" fill="none"/>
      <line x1="132" y1="120" x2="195" y2="135" stroke="#6B5BFF" stroke-width="8" stroke-linecap="round"/>
      <g fill="#6B5BFF" opacity=".35">
        <circle cx="60" cy="40" r="4"/><circle cx="30" cy="160" r="3"/><circle cx="260" cy="40" r="3"/><circle cx="240" cy="170" r="4"/>
      </g>
    </svg>
  </div>
  <div>
    <p class="text-sm uppercase tracking-wider text-violet font-semibold">Error 404</p>
    <h3 class="text-3xl font-bold mt-1">We can’t find that page</h3>
    <p class="text-gray-600 mt-2">The URL may be incorrect or the page has moved.</p>
    <div class="mt-6 flex flex-wrap gap-3">
      <a href="/" class="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10 hover:brightness-95">Home</a>
      <a href="/components" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Components</a>
      <a href="/components/contact" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Contact</a>
    </div>
  </div>
</div>
<template>
  <div class="grid md:grid-cols-2 gap-6 items-center">
    <div class="relative overflow-hidden rounded-2xl border border-black/10">
      <div class="absolute inset-0 bg-gradient-to-br from-violet/20 via-blue-200/30 to-fuchsia-200/30" />
      <svg viewBox="0 0 300 200" class="relative block w-full h-56">...</svg>
    </div>
    <div>
      <p class="text-sm uppercase tracking-wider text-violet font-semibold">Error 404</p>
      <h3 class="text-3xl font-bold mt-1">We can’t find that page</h3>
      <p class="text-gray-600 mt-2">The URL may be incorrect or the page has moved.</p>
      <div class="mt-6 flex flex-wrap gap-3">
        <RouterLink to="/" class="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10 hover:brightness-95">Home</RouterLink>
        <RouterLink to="/components" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Components</RouterLink>
        <RouterLink to="/components/contact" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Contact</RouterLink>
      </div>
    </div>
  </div>
</template>
<script setup>
// purely presentational
</script>
import React from 'react'
export default function Illustrated404(){
  return (
    <div className="grid md:grid-cols-2 gap-6 items-center">
      <div className="relative overflow-hidden rounded-2xl border border-black/10">
        <div className="absolute inset-0 bg-gradient-to-br from-violet/20 via-blue-200/30 to-fuchsia-200/30" />
        <svg viewBox="0 0 300 200" className="relative block w-full h-56">{/* ...same SVG... */}</svg>
      </div>
      <div>
        <p className="text-sm uppercase tracking-wider text-violet font-semibold">Error 404</p>
        <h3 className="text-3xl font-bold mt-1">We can’t find that page</h3>
        <p className="text-gray-600 mt-2">The URL may be incorrect or the page has moved.</p>
        <div className="mt-6 flex flex-wrap gap-3">
          <a href="/" className="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10 hover:brightness-95">Home</a>
          <a href="/components" className="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Components</a>
          <a href="/components/contact" className="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Contact</a>
        </div>
      </div>
    </div>
  )
}

3) 404 with Search & Quick Links

Helpful search box, categories and quick links.

<div class="text-center max-w-3xl mx-auto">
  <h3 class="text-4xl font-extrabold">Page not found</h3>
  <p class="mt-2 text-gray-600">Try searching below or use the quick links to jump back in.</p>

  <form action="#" role="search" class="mt-6 max-w-xl mx-auto">
    <div class="relative flex rounded-xl border border-black/10 bg-white overflow-hidden shadow-sm focus-within:ring-2 focus-within:ring-violet focus-within:border-violet">
      <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="11" cy="11" r="7" stroke-width="2"></circle>
          <path d="m20 20-3.5-3.5" stroke-width="2" stroke-linecap="round"></path>
        </svg>
      </span>
      <input type="text" aria-label="Search" class="w-full px-4 py-3 pl-10 outline-none border-0 focus:outline-none" placeholder="Search components, docs, articles…" />
      <button type="submit" class="px-4 py-3 bg-violet text-white font-semibold">Search</button>
    </div>
  </form>

  <div class="mt-6 flex flex-wrap justify-center gap-2">
    <a href="/components" class="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Components</a>
    <a href="/" class="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Homepage</a>
    <a href="/components/dropdown" class="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Dropdowns</a>
    <a href="/components/contact" class="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Contact</a>
  </div>

  <div class="mt-8 grid sm:grid-cols-2 gap-4 text-left">
    <a href="/components" class="block border border-black/10 rounded-lg p-4 hover:bg-gray-50">
      <div class="font-semibold">Browse Components</div>
      <div class="text-sm text-gray-600">Buttons, forms, cards, and more.</div>
    </a>
    <a href="/" class="block border border-black/10 rounded-lg p-4 hover:bg-gray-50">
      <div class="font-semibold">Visit Blog</div>
      <div class="text-sm text-gray-600">Tutorials and tips for Tailwind.</div>
    </a>
  </div>
</div>
<template>
  <div class="text-center max-w-3xl mx-auto">
    <h3 class="text-4xl font-extrabold">Page not found</h3>
    <p class="mt-2 text-gray-600">Try searching below or use the quick links to jump back in.</p>

    <form class="mt-6 max-w-xl mx-auto" role="search" @submit.prevent>
      <div class="relative flex rounded-xl border border-black/10 bg-white overflow-hidden shadow-sm focus-within:ring-2 focus-within:ring-violet focus-within:border-violet">
        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">🔍</span>
        <input v-model="q" aria-label="Search" type="text" class="w-full px-4 py-3 pl-10 outline-none border-0 focus:outline-none" placeholder="Search components, docs, articles…" />
        <button type="submit" class="px-4 py-3 bg-violet text-white font-semibold">Search</button>
      </div>
    </form>

    <div class="mt-6 flex flex-wrap justify-center gap-2">
      <RouterLink to="/components" class="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Components</RouterLink>
      <RouterLink to="/" class="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Homepage</RouterLink>
      <RouterLink to="/components/dropdown" class="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Dropdowns</RouterLink>
      <RouterLink to="/components/contact" class="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Contact</RouterLink>
    </div>

    <div class="mt-8 grid sm:grid-cols-2 gap-4 text-left">
      <RouterLink to="/components" class="block border border-black/10 rounded-lg p-4 hover:bg-gray-50">
        <div class="font-semibold">Browse Components</div>
        <div class="text-sm text-gray-600">Buttons, forms, cards, and more.</div>
      </RouterLink>
      <RouterLink to="/" class="block border border-black/10 rounded-lg p-4 hover:bg-gray-50">
        <div class="font-semibold">Visit Blog</div>
        <div class="text-sm text-gray-600">Tutorials and tips for Tailwind.</div>
      </RouterLink>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const q = ref('')
</script>
import React, { useState } from 'react'
export default function NotFoundWithSearch(){
  const [q, setQ] = useState('')
  return (
    <div className="text-center max-w-3xl mx-auto">
      <h3 className="text-4xl font-extrabold">Page not found</h3>
      <p className="mt-2 text-gray-600">Try searching below or use the quick links to jump back in.</p>

      <form className="mt-6 max-w-xl mx-auto" role="search" onSubmit={e => e.preventDefault()}>
        <div className="relative flex rounded-xl border border-black/10 bg-white overflow-hidden shadow-sm focus-within:ring-2 focus-within:ring-violet focus-within:border-violet">
          <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">🔎</span>
          <input value={q} onChange={e => setQ(e.target.value)} aria-label="Search" className="w-full px-4 py-3 pl-10 outline-none border-0 focus:outline-none" placeholder="Search components, docs, articles…" />
          <button type="submit" className="px-4 py-3 bg-violet text-white font-semibold">Search</button>
        </div>
      </form>

      <div className="mt-6 flex flex-wrap justify-center gap-2">
        <a href="/components" className="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Components</a>
        <a href="/" className="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Homepage</a>
        <a href="/components/dropdown" className="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Dropdowns</a>
        <a href="/components/contact" className="px-3 py-1.5 rounded-full bg-white text-gray-900 border border-black/10 hover:bg-gray-50 font-medium">Contact</a>
      </div>

      <div className="mt-8 grid sm:grid-cols-2 gap-4 text-left">
        <a href="/components" className="block border border-black/10 rounded-lg p-4 hover:bg-gray-50">
          <div className="font-semibold">Browse Components</div>
          <div className="text-sm text-gray-600">Buttons, forms, cards, and more.</div>
        </a>
        <a href="/" className="block border border-black/10 rounded-lg p-4 hover:bg-gray-50">
          <div className="font-semibold">Visit Blog</div>
          <div className="text-sm text-gray-600">Tutorials and tips for Tailwind.</div>
        </a>
      </div>
    </div>
  )
}

Notes

  • Previews avoid clipping with preview-stage and no overflow-hidden on wrappers.
  • SVG illustration in Example 2 is inline — no external images/CDNs.
  • Buttons use your configured violet color from Tailwind config.

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More