Cloudscape 404 Error Page

A unique responsive 404 page built with pure HTML and Tailwind CSS .

This tailwind example is contributed by JUGENDRA GANGWAR, on 29-Sep-2026. Component is made with Tailwind v4. It is responsive. similar terms for this example are 404 Pages, Not found,404 pages,Not found

Error Page Other 404 Page

Author JUGENDRA GANGWAR

Tailwind v4 2

Fork Fullscreen

<main class="sky flex items-center justify-center px-6">
  <div class="stars" aria-hidden="true"></div>
  <div class="sun" aria-hidden="true"></div>
  <svg class="clouds" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
    <defs>
      <filter id="puff" x="-30%" y="-60%" width="160%" height="220%">
        <feTurbulence type="fractalNoise" baseFrequency="0.011" numOctaves="4" seed="7" result="n"></feTurbulence>
        <feDisplacementMap in="SourceGraphic" in2="n" scale="110" result="d"></feDisplacementMap>
        <feGaussianBlur in="d" stdDeviation="10"></feGaussianBlur>
      </filter>
      <filter id="puff2" x="-30%" y="-60%" width="160%" height="220%">
        <feTurbulence type="fractalNoise" baseFrequency="0.016" numOctaves="4" seed="21" result="n"></feTurbulence>
        <feDisplacementMap in="SourceGraphic" in2="n" scale="80" result="d"></feDisplacementMap>
        <feGaussianBlur in="d" stdDeviation="7"></feGaussianBlur>
      </filter>
    </defs>
    <g class="drift d1" filter="url(#puff2)" opacity=".55" style="fill:var(--cloud)">
      <ellipse cx="240" cy="190" rx="150" ry="34"></ellipse>
      <ellipse cx="330" cy="172" rx="100" ry="30"></ellipse>
      <ellipse cx="1120" cy="260" rx="170" ry="36"></ellipse>
      <ellipse cx="1210" cy="240" rx="110" ry="30"></ellipse>
    </g>
    <g class="drift d2" filter="url(#puff)">
      <g style="fill:var(--cloud-shade)" transform="translate(0 14)" opacity=".7">
        <ellipse cx="170" cy="470" rx="210" ry="48"></ellipse>
        <ellipse cx="1290" cy="420" rx="230" ry="52"></ellipse>
      </g>
      <g style="fill:var(--cloud)" opacity=".92">
        <ellipse cx="150" cy="450" rx="190" ry="46"></ellipse>
        <ellipse cx="240" cy="418" rx="120" ry="48"></ellipse>
        <ellipse cx="1300" cy="400" rx="210" ry="50"></ellipse>
        <ellipse cx="1210" cy="368" rx="130" ry="46"></ellipse>
      </g>
    </g>
    <g class="drift d3" filter="url(#puff)">
      <g style="fill:var(--cloud-shade)" transform="translate(0 22)" opacity=".8">
        <ellipse cx="200" cy="860" rx="330" ry="90"></ellipse>
        <ellipse cx="720" cy="900" rx="420" ry="80"></ellipse>
        <ellipse cx="1250" cy="850" rx="340" ry="95"></ellipse>
      </g>
      <g style="fill:var(--cloud)">
        <ellipse cx="180" cy="830" rx="300" ry="86"></ellipse>
        <ellipse cx="330" cy="790" rx="190" ry="78"></ellipse>
        <ellipse cx="720" cy="880" rx="400" ry="74"></ellipse>
        <ellipse cx="620" cy="850" rx="210" ry="66"></ellipse>
        <ellipse cx="1260" cy="820" rx="320" ry="90"></ellipse>
        <ellipse cx="1130" cy="785" rx="190" ry="76"></ellipse>
      </g>
    </g>
  </svg>
  <section class="relative z-10 w-full max-w-xl text-center" style="padding:2rem 0 7rem">
    <div class="rise flex items-end justify-center gap-1 sm:gap-2" role="img" aria-label="404">
      <span class="digit" aria-hidden="true">4</span>
      <svg class="balloon" viewBox="0 0 100 150" aria-hidden="true">
        <defs>
          <clipPath id="env">
            <path d="M50 4C22 4 4 24 4 48c0 20 12 36 26 50l6 8h28l6-8c14-14 26-30 26-50C96 24 78 4 50 4z"></path>
          </clipPath>
          <radialGradient id="shine" cx="34%" cy="28%" r="70%">
            <stop offset="0" stop-color="#fff" stop-opacity=".55"></stop>
            <stop offset=".5" stop-color="#fff" stop-opacity="0"></stop>
            <stop offset="1" stop-color="#000" stop-opacity=".28"></stop>
          </radialGradient>
        </defs>
        <g clip-path="url(#env)">
          <rect width="100" height="110" fill="#f4efe6"></rect>
          <path d="M50 4C34 20 30 50 36 106H64C70 50 66 20 50 4z" fill="#e8553d"></path>
          <path d="M4 48C10 20 30 6 50 4C28 26 26 70 36 106H30C14 90 4 70 4 48z" fill="#1f4e79"></path>
          <path d="M96 48C90 20 70 6 50 4C72 26 74 70 64 106H70C86 90 96 70 96 48z" fill="#1f4e79"></path>
          <rect y="66" width="100" height="9" fill="#f4b942" opacity=".95"></rect>
          <rect width="100" height="110" fill="url(#shine)"></rect>
        </g>
        <path d="M36 106L44 126M64 106L56 126M50 106V126" stroke="#5b4636" stroke-width="1.4"></path>
        <rect x="41" y="126" width="18" height="13" rx="2" fill="#a3703f"></rect>
        <rect x="41" y="126" width="18" height="4" rx="1.5" fill="#7c5230"></rect>
        <path d="M45 126v13M50 126v13M55 126v13" stroke="#7c5230" stroke-width=".8" opacity=".7"></path>
      </svg>
      <span class="digit" aria-hidden="true">4</span>
    </div>
    <h1 class="rise mt-8 text-3xl font-extrabold sm:text-4xl"
      style="animation-delay:.12s;font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.02em">
      We can’t find that page
    </h1>
    <p class="rise mx-auto mt-4 max-w-md text-base leading-7" style="animation-delay:.2s;color:var(--ink-soft)">
      The link may be broken, or the page may have moved. Head back home or return to where you were.
    </p>
    <div class="rise mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row" style="animation-delay:.28s">
      <a href="/" class="btn btn-primary">Back to home</a>
      <button type="button" class="btn btn-ghost" onclick="history.length&gt;1?history.back():location.assign('/')">Go back</button>
      <a href="/contact" class="btn btn-ghost">Contact support</a>
    </div>
  </section>
</main>

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
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2.1k
Page not found
When lost get help to get back home

ORGIN_DREAMS

1 year ago

1.5k
404 Page Not Found

KULDEEP

1 year ago

2.1k