Tailwind CSS 404 Error Pages

Sections

Tailwind CSS 404 Error Pages - Madhuranjan UI

Discover a range of creative 404 error page designs that transform a standard error into an engaging experience. Each template is designed to keep your visitors informed and entertained even when they hit a dead end.

Animation Background 404

A visually engaging 404 page featuring an animated background.

404

Lost in Space

You've reached the edge of the universe. The page you requested could not be found. Don't worry, our team is on it!

Return Home

1<div class="dark:bg-gray-900">
2  <div class="flex w-full items-center justify-center dark:bg-gray-900">
3    <div class="relative w-full overflow-hidden p-10 text-center">
4      <div class="radial-gradient absolute inset-0 blur-[118px]"></div>
5
6      <div class="relative z-10">
7        <div class="animate-float inline-block">
8          <div class="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-9xl font-extrabold text-transparent dark:from-purple-400 dark:to-pink-400">404</div>
9        </div>
10

404 Page with Background Animation

A dynamic layout that uses background animations to create an immersive error experience.

404

Page Not Found

We’re sorry, but the page you requested could not be found. It might have been removed, renamed, or is temporarily unavailable.

Return Home

1<div class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700">
2  <svg class="absolute -top-20 -left-20 h-96 w-96 rotate-45 transform opacity-30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
3    <circle cx="100" cy="100" r="100" fill="url(#grad1)" />
4    <defs>
5      <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1">
6        <stop offset="0%" stop-color="#ff80b5" />
7        <stop offset="100%" stop-color="#9089fc" />
8      </linearGradient>
9    </defs>
10  </svg>

Gradient Border 404

A modern 404 page enhanced with a striking gradient border design.

404 Page Not Found

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

Go Home Contact Support

1<div class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 px-4 py-12 dark:from-blue-600 dark:via-purple-700 dark:to-pink-700">
2      <div class="absolute -top-20 -left-20 h-64 w-64 animate-[spin_20s_linear_infinite] rounded-full bg-white/10 backdrop-blur-sm dark:bg-gray-800/10"></div>
3      <div class="absolute -right-20 -bottom-20 h-80 w-80 animate-[spin_25s_linear_infinite_reverse] rounded-full bg-white/10 backdrop-blur-sm dark:bg-gray-800/10"></div>
4
5      <div class="relative z-10 mx-auto max-w-2xl text-center">
6        <h1 class="mb-4 animate-[bounce_2s_ease-in-out_infinite] text-9xl font-extrabold text-white">
7          404
8        </h1>
9
10        <h2 class="mb-4 text-4xl font-bold text-white">Page Not Found</h2>

Lost in Space 404

A creative 404 error page that plays on the "lost in space" theme.

404

Houston, We Have a Problem

Mission control reports a critical navigation error. Target page has escaped gravitational pull. Initiating return sequence...

Beam Me Home

1<div class="relative isolate flex min-h-screen items-center justify-center overflow-hidden bg-gray-50 p-4 dark:bg-[#0a0e17]">
2  <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0D0iMTAwJSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBmaWxsD0IjZmZmIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0D0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48ZyBvcGFjaXR5D0IjMC4xNSI+PGNpcmNsZSBjeD0iMTUwIiBjeT0iMTgwIiByPSIyIi8+PGNpcmNsZSBjeD0iODQwIiBjeT0iNzIwIiByPSIxIi8+PGNpcmNsZSBjeD0iNjAwIiBjeT0iNDUwIiByPSIxLjUiLz48Y2lyY2xlIGN4D0iOTAwIiBjeT0iMzAwIiByPSIxLjIiLz48Y2lyY2xlIGN4PSIzMDAiIGN5D0iODAwIiByPSIxLjgiLz48L2c+PC9zdmc+')] opacity-20 dark:opacity-10"></div>
3
4  <div class="absolute -top-96 left-1/2 h-[800px] w-[800px] -translate-x-1/2 animate-pulse rounded-full bg-gradient-to-r from-purple-500/30 to-pink-500/30 blur-[100px] dark:from-purple-600/20 dark:to-pink-600/20"></div>
5
6  <div class="relative z-10 max-w-2xl space-y-8 text-center">
7    <div class="relative inline-block">
8      <div class="absolute inset-0 animate-pulse bg-gradient-to-r from-purple-600 to-pink-600 opacity-30 blur-3xl"></div>
9      <span class="relative z-10 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-[180px] font-black text-transparent dark:from-purple-400 dark:to-pink-400">404</span>
10    </div>

Beautiful 404 with Card

An aesthetically pleasing 404 page that uses a card layout for a modern look.

404

Oops! Page not found

The page you're looking for doesn't exist.

Go Home

1<div class="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-r from-green-400 to-blue-500">
2  <div class="absolute inset-0 opacity-10">
3    <svg class="h-full w-full" viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
4      <circle cx="400" cy="300" r="300" stroke="white" stroke-width="2" />
5      <circle cx="400" cy="300" r="200" stroke="white" stroke-width="2" />
6      <circle cx="400" cy="300" r="100" stroke="white" stroke-width="2" />
7    </svg>
8  </div>
9  <div class="relative z-10 px-4 text-center">
10    <h1 class="animate-bounce text-8xl font-extrabold text-white md:text-9xl">404</h1>

Testimonial Section