Tailwind HTTP codes Components (211)

HTTP codes from Saturn

404 Error Page with Split-Screen Illustration and Home Button

A split-screen 404 error page with a left text panel showing a large 404 heading, "Oops! Can't Find That Page" message, supporting text, and an orange "Take me home" button. The right side displays a 3D illustration of a smiling cartoon UFO on an orange background.

<section class="relative overflow-hidden">
  <img class="hidden lg:block absolute top-0 right-0 w-1/2 h-full" src="saturn-assets/images/http-codes/image-yellow.png" alt="">
  <div class="relative container px-4 mx-auto">
    <img class="absolute top-0 left-0 ml-20 h-142" src="saturn-assets/images/http-codes/blue-orange-double-light.png" alt="">
    <div class="relative py-20 md:py-24 lg:py-44 max-w-sm mx-auto lg:mx-0">
      <h3 class="text-7xl font-semibold text-gray-900 mb-4">404</h3>
      <h4 class="font-heading text-4xl font-bold text-gray-900 mb-6">Oops! Can't Find That Page</h4>
      <p class="text-xl font-semibold text-gray-500 mb-14">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
      <a class="relative group inline-block py-3 px-5 text-center text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" href="#">
        <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
        <span class="relative">Take me home</span>
      </a>
    </div>
  </div>
  <img class="lg:hidden w-full h-135 md:h-166 object-cover object-bottom" src="saturn-assets/images/http-codes/image-yellow.png" alt="">
</section>

HTTP codes from DarkPro

Tailwind CSS

DarkPro

Split-screen 404 error page with puzzle image

A dark 404 error component with a puzzle-piece photograph on the left and a centered error message on the right. It shows an "Error 404" label, a "Page not found" heading, supporting text, and two buttons: a primary "Return to homepage" and a secondary "Try Again".

<section class="relative pb-20 lg:py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="lg:absolute lg:top-0 lg:left-0 lg:bottom-0 h-full w-full lg:w-5/12 mb-12 lg:mb-0">
        <div class="relative h-full">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
            <div class="pb-1 lg:pb-0 lg:pr-1 border-b lg:border-b-0 lg:border-r border-white border-opacity-20 h-full">
                <img class="relative object-cover w-full h-full border border-neutral-800" src="https://images.unsplash.com/photo-1730804518415-75297e8d2a41?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHxtaXNzaW5nfGVufDB8fHx8MTc1MDAyNDM3NHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=850" alt="">
            </div>
        </div>
    </div>
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap">
            <div class="w-full lg:w-7/12 lg:ml-auto text-center">
                <span class="text-sm text-neutral-400 font-medium">Error 404</span>
                <h2 class="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Page not found</h2>
                <p class="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-neutral-300">Sorry! We are unable to find the page you are looking for.</p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
                        Return to homepage
                        <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                    <a class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white hover:text-white border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" href="#">Try Again</a>
                </div>
            </div>
        </div>
    </div>
</section>

HTTP codes from Flaro

Tailwind CSS

Flaro

404 Error Page with Illustration and Homepage Link

A split-screen 404 error section with a large purple 404 heading, a short error message, and a 'Go Back to Homepage' text link on the left, paired with an illustration of legs sticking out of a hole on the right. It is used to inform users that a requested page does not exist and offer a route back to the homepage.

<section class="pt-32 pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-col justify-between h-full">
          <div class="mb-8">
            <h2 class="mb-6 text-16xl text-indigo-600 font-bold tracking-px-2n leading-none">404</h2>
            <h3 class="mb-4 text-3xl font-bold font-heading leading-snug">Something is wrong!</h3>
            <p class="text-lg text-gray-600 font-medium leading-normal md:max-w-md">The page you are looking for is not found! Try something else or go back to homepage.</p>
          </div>
          <div>
            <a class="inline-flex items-center text-center font-semibold text-indigo-600 hover:text-indigo-700 leading-normal" href="#">
              <svg class="mr-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.66667 12.6667L2 8.00004M2 8.00004L6.66667 3.33337M2 8.00004L14 8.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span>Go Back to Homepage</span>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8 self-end">
        <img class="w-full max-w-2xl mx-auto transform hover:-translate-x-4 transition ease-in-out duration-1000" src="flaro-assets/images/http-codes/illustration.png" alt="">
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

HTTP codes from Gradia

Tailwind CSS

Gradia

404 Not Found Error Page with Gradient Heading and Homepage Button

A full-page error state for a missing page, showing a gradient 404 number, a 'Nothing found' label, a bold heading, supporting text, and a dark button linking back to the homepage. Content is left-aligned on a light background with a soft gradient glow and a Gradia logo at the top.

<section class="pt-16 pb-44 bg-gray-50 overflow-hidden">
  <div class="relative container mx-auto px-4"><img class="absolute top-0 left-0" src="gradia-assets/elements/http-codes/radial.svg" alt="">
    <div class="relative z-10"><img class="mb-36" src="gradia-assets/logos/gradia-name-black.svg" alt="">
      <h2 class="mb-32 max-w-max font-heading font-bold text-15xl text-transparent bg-clip-text bg-gradient-orange" >404</h2>
      <div class="md:max-w-xl">
        <p class="mb-6 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Nothing found</p>
        <h2 class="mb-5 font-heading font-bold text-6xl sm:text-7xl text-gray-900" >The page you are looking for is not available!</h2>
        <p class="mb-11 text-gray-600 text-lg" >Try something different or go back to the homepage.</p>
        <button class="group relative font-heading py-5 px-9 block w-full md:w-auto text-xs text-white font-semibold uppercase bg-gray-900 overflow-hidden rounded">
          <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full transition ease-in-out duration-500 bg-gray-800"></div>
          <p class="relative z-10" >Go back to Homepage</p>
        </button>
      </div>
    </div>
  </div>
</section>

HTTP codes from Solstice

Tailwind CSS

Solstice

404 Error Page with Placeholder Card Grid

A 404 'page not found' message centered over a faded grid of placeholder cards, with a short explanatory paragraph and an orange 'Back to Home' call-to-action button. The layout is a centered stack overlaying a four-column grid on a light background.

<section class="overflow-hidden px-10 pb-10">
  <div class="container mx-auto px-4 relative">
    <div class="flex justify-center gap-6 mb-6">
      <div class="hidden xl:block w-80 h-80 rounded-3xl" style="background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      <div class="hidden xl:block w-80 h-80 rounded-3xl" style="background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      <div class="hidden sm:block w-80 h-80 rounded-3xl" style="background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      <div class="w-80 h-80 rounded-3xl" style="background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
    </div>
    <div class="flex justify-center gap-6">
      <div class="w-80 h-80 rounded-3xl bg-gray-50 bg-opacity-50"></div>
      <div class="hidden xl:block w-80 h-80 rounded-3xl border border-gray-50"></div>
      <div class="hidden xl:block w-80 h-80 rounded-3xl border border-gray-50"></div>
      <div class="hidden sm:block w-80 h-80 rounded-3xl bg-gray-50 bg-opacity-50"></div>
    </div>
    <div class="absolute bottom-14 left-1/2 transform -translate-x-1/2 w-full">
      <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-6">Oops. Page not found.</h1>
      <p class="text-center text-gray-500 text-lg mb-10 max-w-lg mx-auto">The page you are looking for was moved, removed, renamed or might have never existed!</p>
      <div class="flex justify-center"><a class="w-full sm:w-auto text-center py-4 px-6 h-14 inline-flex items-center justify-center rounded-full bg-orange-500 border border-orange-600 shadow text-sm font-semibold text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Back to Home</a></div>
    </div>
  </div>
</section>

HTTP codes from Zanrly

Tailwind CSS

Zanrly

404 Page Not Found Error Screen with Homepage and Retry Buttons

A left-aligned error page with a Zanrly logo, a blue 404 label, a large 'Page not found' heading, a short apology message, and two actions: a filled blue 'Go back to Homepage' button and a secondary 'Try Again' button. The layout is a minimal centered-stack style on a white background with no imagery or navigation.

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-20 px-8 bg-white border border-gray-100 rounded-3xl">
      <div class="pt-20 pb-32 md:pt-36 md:pb-64 max-w-7xl mx-auto">
        <div class="md:max-w-md">
          <img class="mb-20" src="zanrly-assets/logos/zanrly-logo-small.svg" alt="">
          <h3 class="font-heading text-2xl text-blue-500 font-black tracking-tight">404</h3>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Page not found</h2>
          <p class="mb-6 text-gray-500 font-bold">We’re sorry, the page you requested could not be found. Please go back to the homepage</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Go back to Homepage</a></div>
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-gray-900 font-bold bg-gray-50 hover:bg-gray-200 focus:ring-4 focus:ring-gray-200 rounded-full" href="#">Try Again</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

HTTP codes from Zeus

Tailwind CSS

Zeus

Split-screen 404 error page with photo and recovery actions

A split-screen error page showing an "Error 404" label, a "Page not found" heading, and two buttons for returning home or retrying. The left half displays a photo of a person holding a camera against a tan background, while the right half contains the centered error content on white.

<section class="relative lg:py-20 overflow-hidden">
  <img class="lg:absolute lg:top-0 lg:left-0 h-128 lg:h-auto max-h-screen w-full lg:w-5/12 object-cover" src="https://images.unsplash.com/photo-1544717305-996b815c338c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center">
      <div class="w-full lg:w-7/12 lg:ml-auto mt-12 mb-20 text-center">
        <span class="text-xs font-semibold text-gray-500 uppercase">Error 404</span>
        <h2 class="mt-8 mb-10 text-4xl font-semibold font-heading">Page not found</h2>
        <p class="mb-12 text-xl text-gray-500">Sorry! We are unable to find the page you are looking for</p>
        <div class="flex flex-wrap justify-center"><a class="w-full md:w-auto px-8 py-4 mb-4 md:mb-0 md:mr-4 bg-red-400 hover:bg-red-300 text-sm text-white font-medium leading-normal rounded" href="#">Go back to Homepage</a><a class="w-full md:w-auto px-12 py-4 border hover:border-gray-500 text-sm font-medium leading-normal rounded" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

HTTP codes from Wrexa

Tailwind CSS

Wrexa

Error Page Hero: Something Has Gone Wrong with Homepage Button

A full-width purple hero section displaying a large white heading 'Something has gone wrong.' with a supporting line of text, a back-to-home link, and a purple Homepage call-to-action button. The layout is left-aligned and stacked vertically, with thin rules beneath the heading lines.

<section class="pb-40 pt-40 md:pt-96 bg-indigo-200 relative">
  <div class="hidden md:block absolute top-0 left-0 w-8 h-full bg-white"></div>
  <div class="container px-4 mx-auto">
    <div class="max-w-xs sm:max-w-xl lg:max-w-4xl 2xl:max-w-6xl sm:ml-12 md:ml-24">
      <h2 class="text-4xl sm:text-6xl lg:text-8xl 2xl:text-9xl text-white mb-24">
        <span class="relative">
          <span>Something has</span>
          <div class="hidden sm:block absolute bottom-0 left-0 mb-2 sm:mb-4 2xl:mb-8 h-px w-full bg-white"></div>
        </span>
        <span class="relative">
          <span>gone wrong.</span>
          <div class="hidden sm:block absolute bottom-0 left-0 mb-2 sm:mb-4 2xl:mb-8 h-px w-full bg-white"></div>
        </span>
      </h2>
      <p class="flex items-center mb-16">
        <span class="mr-4 text-xl text-white">We can’t find that page. Back to home.</span>
        <span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="white"></path>
          </svg>
        </span>
      </p>
      <a class="inline-block px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Homepage</a>
    </div>
  </div>
</section>

HTTP codes from Zospace

Tailwind CSS

Zospace

Dark 404 Error Page with Zospace Branding and Start Again Button

A full-width dark 404 error screen showing a bold 'Sorry, we can't find that page' heading, a muted 'Go back or try here' line, and a blue 'Start again' pill button. Decorative blue and purple arcs, faint outlined circles, and white sparkle shapes frame the left and right sides.

<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <img class="absolute top-0 right-0 md:-mr-96 md:-mt-112" src="zospace-assets/lines/circle.svg" alt="">
  <img class="absolute top-0 right-0 h-40 lg:h-80 lg:mr-64 lg:mt-24" src="zospace-assets/images/five-stars.svg" alt="">
  <img class="hidden lg:block absolute top-0 left-0 h-64 -ml-10" src="zospace-assets/images/blue-double-circle.svg" alt="">
  <img class="absolute bottom-0 left-0 h-80" src="zospace-assets/lines/half-double-circle.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
      <div class="max-w-xl">
        <a class="inline-block text-white text-xl font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
        </a>
        <h2 class="mt-12 mb-14 text-5xl font-bold font-heading text-white">Sorry, we can't find that page or something has gone wrong...</h2>
        <p class="mb-20 text-xl text-gray-200">Go back or try here:</p>
        <a class="inline-block px-12 py-4 text-lg bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-full transition duration-200" href="#">Start again</a>
      </div>
    </div>
  </div>
</section>

HTTP codes from Flex

Tailwind CSS

Flex

Dark 404 error page with heading and action buttons

A full-screen dark error state showing an 'Error 404' badge, a 'Page not found' heading, a brief apology message, and two buttons to return home or retry. Decorative colored line and dot patterns frame the corners.

<section class="relative py-24 md:py-44 lg:py-64 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="max-w-4xl mx-auto text-center">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium rounded-full shadow-sm">Error 404</span>
      <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Page not found</h2>
      <p class="mb-12 text-lg md:text-xl text-coolGray-400">Something went wrong, so this page is broken.</p>
      <div class="flex flex-wrap justify-center">
        <div class="w-full md:w-auto py-1 md:py-0 md:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Go back to Homepage</a></div>
        <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-100 font-medium text-center bg-coolGray-600 hover:bg-coolGray-700 focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
  <img class="absolute top-0 left-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave2-yellow.svg" alt="">
  <img class="absolute right-6 top-6 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-green.svg" alt="">
  <img class="absolute right-0 bottom-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave3-red.svg" alt="">
  <img class="absolute left-6 bottom-6 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-violet.svg" alt="">
</section>

HTTP codes from Uinel

Tailwind CSS

Uinel

404 Not Found Error Page with Back to Home Link

A centered white card on a decorative gradient background displaying a 404 error heading, a short explanatory message, and a green 'Back to home' text link with an arrow. Floating colored name tags (Padma, Tosh) decorate the edges of the card.

<section class="py-14 2xl:pt-14 2xl:pb-32 bg-gray-50 overflow-hidden">
  <div class="relative container px-4 mx-auto">
    <img class="absolute left-0 -bottom-6 xl:-left-10 md:bottom-24 z-30 w-28 md:w-auto" src="uinel-assets/images/http-codes/cursor-orange.svg" alt="">
    <img class="absolute right-0 xl:-right-12 top-0 md:top-96 z-30 w-24 md:w-auto" src="uinel-assets/images/http-codes/cursor-blue.svg" alt="">
    <img class="absolute md:left-24 -top-16 z-10" src="uinel-assets/images/http-codes/elipse-purple.svg" alt="">
    <img class="absolute -left-16 top-12 md:-top-5" src="uinel-assets/images/http-codes/elipse-yellow.svg" alt="">
    <div class="relative text-center py-12 md:py-24 px-4 2xl:pt-36 2xl:pb-60 bg-white rounded-7xl z-20">
      <div class="relative z-40">
        <span class="block mb-9 uppercase tracking-widest text-xs text-gray-300">Can't find</span>
        <h2 class="mb-6 font-medium font-heading text-9xl md:text-10xl xl:text-smxl leading-tight">404</h2>
        <p class="max-w-md mb-20 xl:mb-24 mx-auto font-heading font-medium text-3xl leading-10">Wooops. We can’t find that page or something has gone wrong.</p>
        <a class="inline-flex items-center pb-2 font-bold tracking-tight text-xl leading-6 text-green-600 hover:text-green-700 border-b border-green-600 hover:border-green-700" href="#">
          <span class="mr-3">Back to home</span>
          <svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.8 1L15 7H1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M11 12L15 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>

HTTP codes from Yofte

Tailwind CSS

Yofte

404 Error Page with Yofte Logo and Decorative Arcs

A minimal not-found error page with a small Yofte logo at top, a large bold heading stating the page could not be found, a short line of supporting text, and an orange HOMEPAGE call-to-action button. Decorative curved purple, blue, and orange arcs frame the left and top of a light background.

<section class="bg-gray-100 pb-20">
  <div class="py-10 bg-gray-100">
    <div class="container mx-auto px-4">
      <a class="text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
    </div>
  </div>
  <div class="relative py-20 md:py-32 bg-gray-50" style="background-image: url('yofte-assets/elements/lines-color2.svg'); background-size: cover;" alt="">
    <div class="container mx-auto px-4">
      <div class="max-w-md">
        <h2 class="mb-8 text-4xl md:text-5xl font-bold font-heading bg-gray-50">Sorry, we can’t find that page or something has gone wrong</h2>
        <p class="mb-8 md:mb-16 text-lg">Checkout for any URL misspelling.</p>
        <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Homepage</a>
      </div>
    </div>
  </div>
</section>

HTTP codes from Nigodo

Tailwind CSS

Nigodo

404 Error Page Not Found Centered Message with Actions

A centered error state displaying an ERROR 404 badge, a bold 'Page not found' heading, a short explanatory line, and two action buttons: a filled 'Go back to Homepage' button and an outlined 'Try Again' button. The layout is a vertically stacked, centered block on a white background with navy text and a teal badge accent.

<section class="py-26 md:py-48 min-h-screen md:min-h-0 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center">
      <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Error 404</span>
      <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-3">Page not found</h1>
      <p class="text-xl font-extrabold leading-7 mb-6">Something went wrong, so this page is broken.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Go back to Homepage</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Try Again</a></div>
    </div>
  </div>
</section>

HTTP codes from Atis

Tailwind CSS

Atis

404 Error Page with Illustration and Retry Actions

A centered error state page showing a large green 404 illustration with a figure beside a cracked vase, followed by a green "Whoops!" heading, error message, and two buttons to return home or try again. It uses a light background and a green accent throughout.

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <img class="mx-auto" src="atis-assets/illustrations/pablo.png" alt="">
      <div class="text-center">
        <span class="mb-6 text-4xl text-green-600 font-bold">Whoops!</span>
        <h3 class="mb-2 text-4xl font-bold">Something went wrong!</h3>
        <p class="mb-8 text-gray-400">Sorry, but we are unable to open this page</p>
        <div><a class="w-full lg:w-auto mb-2 lg:mb-0 lg:mr-4 inline-block py-2 px-6 rounded-l-xl rounded-t-xl font-bold leading-loose text-gray-50 bg-green-600 hover:bg-green-700" href="#">Go back to Homepage</a><a class="w-full lg:w-auto inline-block py-2 px-6 rounded-l-xl rounded-t-xl font-bold leading-loose bg-white hover:bg-gray-50" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
  <div class="skew skew-bottom mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-bottom ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
    </svg>
  </div>
</section>

HTTP codes from Pstls.

Tailwind CSS

Pstls.

404 Error Page with Serif Heading and Homepage Button

A centered error message on a soft white-to-pink gradient background, showing a lavender 'Error 404' label, a large serif heading apologizing that the page cannot be found, and a black button linking back to the homepage. It has no navigation bar, search input, or illustrative imagery.

<section class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-sm md:max-w-xl mx-auto relative z-10">
      <h3 class="text-4xl lg:text-5xl font-heading mb-12 text-indigo-200" >Error 404</h3>
      <h4 class="text-4xl lg:text-5xl font-heading mb-12" >Sorry, we can't find that page or something has gone wrong...</h4><a class="inline-block px-8 py-3 text-white font-bold bg-black hover:bg-gray-900" href="#" >Go back to Homapage</a>
    </div><img class="absolute top-0 left-0 w-full h-full object-contain" src="pstls-assets/images/http-codes/404.png" alt="" >
  </div><img class="absolute top-0 left-0" src="pstls-assets/images/http-codes/http-codes-shadow.png" alt="" style="z-index: 2;">
</section>

HTTP codes from BoldUI

Tailwind CSS

BoldUI

Dark 404 Error Page with Eye Image and Home Button

A full-screen dark 404 error page featuring an outlined oversized "404" numeral with a tilted elliptical eye photograph overlaid, a BoldUI logo at top, and a yellow "Back to home" button alongside a "Try again" text link. The centered stack layout uses a blue glow in the background for emphasis.

<section class="py-24 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto text-center">
      <a class="inline-block mb-10 md:mb-24" href="#">
        <img class="h-8" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
      </a>
      <div class="relative flex items-center justify-center mb-24">
        <img class="absolute -top-1/2 -left-1/2 h-128" src="boldui-assets/elements/shadow-blue-pricing.svg" alt="">
        <img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/404.svg" alt="">
        <div class="relative clip-path transform rotate-45">
          <img class="h-52 md:h-80 w-40 md:w-64 object-cover transform -rotate-45" src="boldui-assets/images/placeholder3.png" alt="">
        </div>
      </div>
      <div class="flex flex-wrap items-center justify-center">
        <a class="inline-flex w-full md:w-auto mb-6 md:mb-0 md:mr-8 items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
          <svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
          </svg>
          <span class="text-sm font-heading">Back to home</span>
        </a>
        <a class="inline-flex items-center text-white hover:underline" href="#">
          <span class="mr-2 text-sm font-heading">Try again</span>
          <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>

HTTP codes from Acros

Tailwind CSS

Acros

404 Error Page with Robot Illustration and Home Button

A split-screen error page showing a teal 'ERROR 404' label, serif 'Page not found' heading, short apology text, and two buttons for returning home or retrying. A robot illustration with a light bulb sits on the right side against a light background.

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-lg mx-auto">
          <span class="text-sm font-semibold uppercase">
            <span>Error</span>
            <span class="text-green-500">404</span>
          </span>
          <h2 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">Page not found</h2>
          <p class="max-w-xl mx-auto text-lg leading-8 mb-10">Sorry! We are unable to find the page you are looking for</p>
          <div class="sm:flex items-center"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Go back to home page</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Try again</a></div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block mx-auto" src="acros-assets/images/http-codes/robot.png" alt="">
      </div>
    </div>
  </div>
</section>

HTTP codes from Bendis

Tailwind CSS

Bendis

Split-screen 404 page not found error with abstract painting

A split-screen error page with an abstract painting on the left and a light panel on the right showing a bold 'Page not found' heading, apology text, and two buttons to return to the homepage or try again. The angled divider between image and text panel gives it a distinctive layout.

<section class="relative lg:py-20 overflow-hidden bg-blue-50">
  <img class="lg:absolute lg:top-0 lg:left-0 h-64 lg:h-full max-h-screen w-full lg:w-1/2 object-cover lg:clip-path-right-top" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1036&amp;q=80" alt="">
  <div class="container px-4 mx-auto">
    <div class="lg:ml-20 flex flex-wrap items-center">
      <div class="w-full lg:w-1/2 lg:ml-auto mt-12 mb-20">
        <h2 class="mb-3 text-4xl font-bold font-heading text-blue-800">Page not found</h2>
        <p class="max-w-sm mb-5 text-lg text-gray-500 leading-loose">Sorry! We are unable to find the page you are looking for</p>
        <div class="flex flex-wrap justify-start items-center text-center"><a class="w-full md:w-auto px-8 py-5 mb-4 md:mb-0 md:mr-6 border-2 border-transparent bg-yellow-500 hover:bg-yellow-400 text-sm uppercase text-blue-800 font-bold leading-normal" href="#">Go back to Homepage</a><a class="w-full md:w-auto px-8 py-5 border-2 border-blue-800 hover:border-blue-900 text-sm text-blue-800 uppercase font-bold leading-normal" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

HTTP codes from Metis

Tailwind CSS

Metis

404 Error Page with Illustration and Recovery Actions

A centered error state page showing a 404 illustration of a person at a desk with a monitor, followed by the heading 'Whoops!' and 'Something went wrong!', a short apology line, and two buttons to return to the homepage or try again.

<section class="py-20">
  <div class="container px-4 mx-auto text-center">
    <img class="md:max-w-md mx-auto mb-12" src="metis-assets/illustrations/error1.png" alt="">
    <span class="text-4xl text-blue-600 font-bold font-heading">Whoops!</span>
    <h2 class="mb-2 text-4xl font-bold font-heading">Something went wrong!</h2>
    <p class="mb-6 text-blueGray-400">Sorry, but we are unable to open this page.</p>
    <div><a class="block sm:inline-block py-4 px-8 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Go back to Homepage</a><a class="block sm:inline-block py-4 px-8 text-xs text-blueGray-500 hover:text-blueGray-800 text-center font-semibold leading-none bg-blueGray-50 hover:bg-blueGray-100 rounded" href="#">Try Again</a></div>
  </div>
</section>

HTTP codes from Shuffle UX

Tailwind CSS

Shuffle UX

Split-screen 404 error page with image placeholder and recovery buttons

A split-screen error state with a slate placeholder panel containing an image icon on the left and a centered 'Page not found' message on the right. It offers two actions: a filled 'Go back to Homepage' button and an outlined 'Try Again' button.

<section class="relative lg:py-20">
  <img class="lg:absolute lg:top-0 lg:left-0 h-112 w-full lg:w-5/12 mb-12 lg:mb-0 object-cover" src="mockup-assets/images/gray-500-square.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-7/12 lg:ml-auto my-12 text-center">
        <span class="text-xs font-bold text-gray-200 uppercase">Error 404</span>
        <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading">Page not found</h2>
        <p class="mb-6 text-lg text-gray-500 leading-loose">Sorry! We are unable to find the page you are looking for</p>
        <div class="flex flex-wrap justify-center"><a class="px-6 py-2 mr-4 bg-gray-500 hover:bg-gray-600 text-sm leading-loose text-gray-50 font-semibold rounded" href="#">Go back to Homepage</a><a class="px-6 py-2 border hover:border-gray-400 text-sm font-semibold leading-loose rounded" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

Address errors will happen, so it's a good idea to have a page prepared for the occasion. Here you will find examples of each type of error and information for Tailwind components HTTP codes.

Choose from many variations of the Tailwind components HTTP codes. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library is designed by a professional designer and coded by our team of developers.

Get access to all sections of the Tailwind components HTTP codes, html, sass, pug files and our drag and drop editor to change them. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS HTTP codes Components

Framework

UI Library

Components

HTTP codes from Saturn

404 Error Page with Split-Screen Illustration and Home Button

HTTP codes from DarkPro

Split-screen 404 error page with puzzle image

HTTP codes from Flaro

404 Error Page with Illustration and Homepage Link

Your next website starts here

HTTP codes from Gradia

404 Not Found Error Page with Gradient Heading and Homepage Button

HTTP codes from Solstice

404 Error Page with Placeholder Card Grid

HTTP codes from Zanrly

404 Page Not Found Error Screen with Homepage and Retry Buttons

HTTP codes from Zeus

Split-screen 404 error page with photo and recovery actions

HTTP codes from Wrexa

Error Page Hero: Something Has Gone Wrong with Homepage Button

HTTP codes from Zospace

Dark 404 Error Page with Zospace Branding and Start Again Button

HTTP codes from Flex

Dark 404 error page with heading and action buttons

HTTP codes from Uinel

404 Not Found Error Page with Back to Home Link

HTTP codes from Yofte

404 Error Page with Yofte Logo and Decorative Arcs

HTTP codes from Nigodo

404 Error Page Not Found Centered Message with Actions

HTTP codes from Atis

404 Error Page with Illustration and Retry Actions

HTTP codes from Pstls.

404 Error Page with Serif Heading and Homepage Button

HTTP codes from BoldUI

Dark 404 Error Page with Eye Image and Home Button

HTTP codes from Acros

404 Error Page with Robot Illustration and Home Button

HTTP codes from Bendis

Split-screen 404 page not found error with abstract painting

HTTP codes from Metis

404 Error Page with Illustration and Recovery Actions

HTTP codes from Shuffle UX

Split-screen 404 error page with image placeholder and recovery buttons

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support