Tailwind HTTP codes Components (211)

HTTP codes from Cronos

404 Error Page with Illustration and Recovery Actions

A centered error state page showing an ERROR 404 badge, a large 'Page not found' heading, supporting text, and two action buttons to return to the homepage or try again. An illustration of two people working with a laptop and code graphic appears on the left, balancing the text block on the right.

<section class="py-20 lg:py-0 relative overflow-hidden">
    <div class="lg:w-1/2 absolute hidden lg:flex top-0 left-0 justify-center items-center object-cover h-full">
        <img class="w-full object-contain" style="max-height: 380px;" src="cronos-assets/images/example-scene2.png" alt="">
    </div>
    <div class="py-6 lg:hidden">
        <img class="mx-auto block w-full object-contain" style="max-height: 360px;" src="cronos-assets/images/example-scene2.png" alt="">
    </div>
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4 ml-auto lg:py-64 pt-32 pb-40 relative text-center">
                <img class="absolute bottom-0 left-0 h-20" src="cronos-assets/elements/light-green-left.svg" alt="">
                <img class="absolute top-0 left-0 h-20" src="cronos-assets/elements/green-light-left.svg" alt="">
                <img class="absolute top-0 right-0 h-20" src="cronos-assets/elements/light-green-small.svg" alt="">
                <img class="absolute bottom-0 right-0 h-20" src="cronos-assets/elements/light-green-right.svg" alt="">
                <div class="inline-block bg-yellow-100 px-2 py-1 text-xs font-bold mb-4">ERROR 404</div>
                <h1 class="font-heading text-4xl lg:text-5xl font-bold mb-2">Page not found</h1>
                <p class="text-gray-600 mb-6">Sorry! We are unable to find the page you are looking for</p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a class="px-6 py-3 block text-center w-full sm:w-auto bg-green-500 text-white text-sm font-bold hover:bg-green-600 focus:ring focus:ring-green-300 transition duration-200" href="#">Go back to Homepage</a>
                    <a class="px-6 py-3 block text-center w-full sm:w-auto bg-orange-900 text-white text-sm font-bold hover:bg-orange-800 focus:ring focus:ring-orange-700 transition duration-200" href="#">Try Again</a>
                </div>
            </div>
        </div>
    </div>
</section>

HTTP codes from Casper

Tailwind CSS

Casper

404 Error Page with Split-Screen Illustration

A dark purple 404 error page with a bold heading "Oops! Can't Find That Page", a short apology message, and a purple "Take Me Home" call-to-action button on the left. The right half displays a 3D illustration of an industrial factory with conveyor belts and packages.

<section class="relative bg-body overflow-hidden">
  <img class="absolute top-0 h-full left-0 ml-96" src="casper-assets/http-code/double-line-circle.svg" alt="">
  <div class="relative flex flex-wrap -mx-4">
    <div class="absolute top-0 left-0 -mt-64 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
    <div class="w-full lg:w-1/2 px-4">
      <div class="relative max-w-md xl:max-w-lg mx-auto pt-28 pb-12 lg:py-64 px-4">
        <img class="absolute top-0 lg:bottom-0 right-0 -mr-8 lg:-mr-0 lg:mb-24 animate-spinStar" src="casper-assets/http-code/blink-star.png" alt="">
        <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl font-semibold text-white tracking-tight mb-6">Oops! Can't Find That Page</h2>
        <p class="text-xl text-gray-400 mb-6">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
        <a class="group inline-flex w-full md:w-auto h-14 px-7 items-center justify-center text-base font-medium text-black hover:text-violet-800 bg-violet-500 hover:bg-white transition duration-200 rounded-full" href="#">TAKE ME HOME</a>
      </div>
    </div>
    <div class="w-full lg:w-1/2 px-4">
      <div class="relative h-full">
        <img class="lg:absolute top-0 left-0 h-148 lg:h-full block w-full rounded-3xl object-cover" src="casper-assets/http-code/right-factory-box.png" alt="">
      </div>
    </div>
  </div>
</section>

HTTP codes from Mirga

Tailwind CSS

Mirga

404 Error Page with Split Layout and Homepage Button

A not-found error section with a large heading "Shh* Something has wrong." and short explanatory text, a dark Homepage button, and a decorative gray and green abstract shape on the right separated by a thin vertical divider. The white card sits on a light gray background with large dark letterforms partially visible at the bottom.

<section class="relative py-12 md:py-24 bg-neutral-50">
  <div class="container mx-auto px-4">
    <div class="relative z-10 px-12 py-16 bg-white rounded-4xl">
      <div class="flex flex-wrap -m-4 divide-y md:divide-y-0 md:divide-x divide-neutral-50">
        <div class="w-full md:w-2/3 p-4">
          <h1 class="relative mb-12 text-5xl sm:text-6xl md:text-9xl xl:text-11xl text-neutral-800 font-semibold font-heading">
            <span class="mr-3">Shh* Something</span>
            <span class="relative inline-block">
              <span class="relative z-10">has wrong.</span>
              <span class="absolute -bottom-2 left-0 h-2.5 w-full bg-green-200 rounded-full"></span>
            </span>
          </h1>
          <p class="mb-12 md:mb-80 text-2xl text-neutral-600 font-semibold tracking-tight">That page isn’t doesn’t exist or we can’t find it.</p>
        </div>
        <div class="w-full md:w-1/3 p-4">
          <div class="py-12 md:py-0">
            <div class="max-w-max mx-auto">
              <img class="mx-auto object-cover h-64" src="mirga-assets/images/http-codes/face.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <a class="inline-flex justify-center items-center text-center h-20 p-5 font-semibold tracking-tight text-2xl text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Homepage</a>
    </div>
  </div>
  <img class="absolute bottom-0 right-0" src="mirga-assets/images/http-codes/404.png" alt="">
</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 Vista

Tailwind CSS

Vista

Dark 404 Page Not Found Error State with Back to Home Button

A centered error state for a missing page, showing a sad document illustration, a bold 'Oops. Page not found.' heading, explanatory text, and a pink 'Back to home' call-to-action button on a dark background.

<section class="bg-darkPink-900 pt-32 pb-40">
    <div class="container mx-auto px-4">
        <img class="mx-auto mb-24 h-56 object-cover" src="vista-assets/images/http-codes/illustration.svg" alt="">
        <h1 class="font-heading text-white text-center text-4xl font-semibold mb-4">Oops. Page not found.</h1>
        <p class="text-white text-center text-opacity-70 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="text-center">
            <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 rounded-full"></div>
                <div class="relative z-50 flex items-center py-2 px-4 bg-pink-500 group-hover:bg-pink-600 group-focus:bg-pink-600 rounded-full transition duration-200">
                    <p class="mr-2 text-white">Back to home</p>
                    <svg class="text-white" xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                        <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
            </a>
        </div>
    </div>
</section>

HTTP codes from Flow

Tailwind CSS

Flow

404 Error Page with Outlined Numerals and Back to Home Button

A centered not-found error state showing a large outlined "404" numeral over soft green line-art background, followed by a short explanatory message and a dark pill-shaped button linking back to the home page.

<section class="relative py-24 md:py-32 xl:py-52 overflow-hidden">
        <img class="absolute top-0 left-0 h-full w-full" src="flow-assets/http-codes/waves-lines.png" alt="">
        <img class="absolute top-0 left-0" src="flow-assets/http-codes/lime-shadow.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="text-center">
                <img class="block w-full max-w-sm md:max-w-lg lg:max-w-2xl md:h-96 mb-5 mx-auto" src="flow-assets/http-codes/numbers.svg" alt="">
                <p class="max-w-md mx-auto mb-12 text-lg text-gray-700">The page you are looking for was moved, removed, renamed or might have never existed!</p>
                <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Back to home</a>
            </div>
        </div>
    </section>

HTTP codes from Cyber

Tailwind CSS

Cyber

Cyberpunk 404 Error Page with Neural Pathway Message

A split-screen 404 error page on a dark background, with a glowing triangle graphic labeled 404 on the left and a heading, system error text, and two action buttons on the right. It uses neon cyan, purple, and green accents with monospace body text and a stylized error tag.

<section class="relative pb-20 lg:py-20 scan-lines">
        <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <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 relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-20"></div>
            <div class="absolute inset-0 hologram-effect"></div>
            <div class="h-full w-full bg-gradient-to-br from-gray-900 to-black flex items-center justify-center relative">
                <div class="text-center">
                    <div class="w-64 h-64 mx-auto mb-6 bg-gradient-to-br from-blue-400 to-purple-500 opacity-30 flex items-center justify-center relative overflow-hidden animate-float" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);">
                        <div class="absolute inset-4 border-2 border-green-400 animate-spin" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
                        <div class="absolute inset-8 border-2 border-blue-400 animate-pulse" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
                        <span class="text-6xl font-heading text-blue-400 animate-glitch">404</span>
                    </div>
                    <div class="grid grid-cols-2 gap-2 text-xs max-w-xs mx-auto">
                        <div class="bg-red-500 bg-opacity-20 p-2 border border-red-500 border-opacity-30 text-red-400" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">ERROR: 404</div>
                        <div class="bg-purple-500 bg-opacity-20 p-2 border border-purple-500 border-opacity-30 text-purple-500" style="clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);">STATUS: LOST</div>
                    </div>
                </div>
                <div class="absolute top-4 right-4 w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
                <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
            </div>
        </div>
        
        <div class="container px-4 mx-auto relative z-10">
            <div class="flex flex-wrap">
                <div class="w-full lg:w-7/12 lg:ml-auto text-center lg:text-left lg:flex lg:flex-col lg:justify-center lg:lg:py-20">
                    <div class="relative">
                        <span class="text-xs font-semibold text-red-500 uppercase tracking-wider bg-red-500 bg-opacity-10 px-3 py-1 border border-red-500 border-opacity-30" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">ERROR 404 PROTOCOL BREACH</span>
                        <div class="absolute -top-1 -left-1 w-full h-full border border-red-500 opacity-20 transform rotate-1" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);"></div>
                    </div>
                    
                    <div class="relative mt-6">
                        <h2 class="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider animate-glitch bg-gradient-to-r from-red-400 via-purple-500 to-blue-400 bg-clip-text text-transparent">NEURAL PATHWAY NOT FOUND</h2>
                        <div class="absolute -top-2 -left-2 w-full h-full border-2 border-red-500 opacity-20 transform rotate-1"></div>
                    </div>
                    
                    <p class="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400 max-w-lg">SYSTEM ERROR: Unable to establish connection to requested data node. The quantum pathway has been severed or relocated to another dimension.</p>
                    
                    <div class="flex flex-col md:flex-row gap-4">
                        <a class="group relative px-8 py-4 text-sm text-center bg-gradient-to-r from-blue-400 to-purple-500 hover:from-purple-500 hover:to-blue-400 text-gray-950 font-semibold tracking-wider transition-all duration-300 transform hover:scale-105 hover:animate-pulse-neon overflow-hidden" href="#" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">
                            <span class="relative z-10">RETURN TO MAINFRAME</span>
                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
                        </a>
                        <a class="group relative px-8 py-4 text-sm text-center font-semibold text-green-400 hover:text-gray-950 hover:bg-green-400 border-2 border-green-400 transition-all duration-300 transform hover:scale-105 overflow-hidden" href="#" style="clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);">
                            <span class="relative z-10">REINITIALIZE SEARCH</span>
                            <div class="absolute inset-0 bg-green-400 transform translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTTP codes from FilyTreck

Tailwind CSS

FilyTreck

Dark 404 Error Page with Back to Homepage Button

A full-width dark error state displaying a centered headline stating the page was not found, a blue pill-shaped button linking back to the homepage, and a large outlined 404 numeral filling the lower area as background decoration.

<section class="pt-24 md:pt-36 bg-black">
    <div class="container mx-auto px-4">
        <h2 class="mb-18 font-heading text-3xl md:text-4xl font-medium text-white text-center">That page isn’t doesn’t exist or we can’t find it.</h2>
        <div class="mb-24 flex justify-center">
            <a href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Back to homepage</a>
        </div>
    </div>
    <img class="mx-auto object-cover" style="height: 393px" src="fily-assets/categories/404.png" alt="">
</section>

HTTP codes from Aurora

Tailwind CSS

Aurora

Dark Green 404 Error Page with Gradient Numerals and Homepage Link

A centered error state displaying a large gradient "404" numeral, a bold heading stating the page does not exist, a muted explanatory line, and a green text link back to the homepage. The layout is a single vertical stack on a solid dark green background.

<section class="py-24 lg:py-40 bg-teal-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto text-center">
      <img class="block mx-auto mb-10" src="aurora-assets/http-codes/404-green.png" alt="">
      <h4 class="text-4xl font-bold text-white mb-4">Oops. That page doesn’t exist.</h4>
      <p class="text-xl text-gray-400 mb-10">Something went wrong, so this page is broken.</p>
      <a class="inline-block text-base font-bold text-yellowGreen-700 hover:text-yellowGreen-600" href="#">Go back to Homepage</a>
    </div>
  </div>
</section>

HTTP codes from asitrastudio

Tailwind CSS

asitrastudio

404 Error Page with Split Architectural Imagery

A split-screen error page displaying 'Error 404' with an error badge, body text, and a 'Back to homepage' outlined button on a white panel, paired with two tall rounded architectural photographs on the right. The layout is spacious and minimal, with a serif-free sans heading and a footer-style caption aligned right.

<section class="py-10 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-2">
      <div class="w-full lg:w-1/2 px-2 mb-4 lg:mb-0">
        <div class="py-20 px-8 sm:px-20 bg-white rounded-4xl">
          <div class="max-w-2xl mx-auto">
            <div class="max-w-md mb-20 lg:mb-32">
              <span class="inline-block mb-4 py-2 px-3 text-sm text-black leading-none border-1.5 border-black rounded-full transition duration-200">Error</span>
              <h2 class="font-heading text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-6">Error 404</h2>
              <p class="text-coolGray-60 mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
              <a class="group inline-flex py-5 px-8 items-center justify-center leading-none font-medium text-black hover:text-white border border-black rounded-full hover:bg-black transition duration-200" href="#">
                <span class="mr-2">Back to homepage</span>
                <span class="group-hover:rotate-45 transform transition duration-100">
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 1L1 9" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M9 8.33571V1H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </a>
            </div>
            <div class="max-w-xs ml-auto text-right">
              <span class="block mb-3 text-sm">2023</span>
              <p class="text-coolGray-600">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-5/12 lg:w-2/12 px-2">
        <img class="w-full h-96 sm:h-112 md:h-150 lg:h-full rounded-4xl object-cover" src="asitrastudio-assets/http-codes/photo-sm.png" alt="">
      </div>
      <div class="w-7/12 lg:w-4/12 px-2">
        <img class="w-full h-96 sm:h-112 md:h-150 lg:h-full rounded-4xl object-cover" src="asitrastudio-assets/http-codes/photo-lg.png" alt="">
      </div>
    </div>
  </div>
</section>

HTTP codes from Consulty

Tailwind CSS

Consulty

404 Page Not Found Error Section with Home Button

A light gray error-state panel showing a large faded "404" numeral on the left and a centered-stack heading "Oops! Page not found" with supporting text and a black pill-shaped "Go Back to Home" button on the right. The layout is a split-screen arrangement within a rounded container.

<section class="px-8 md:px-24 py-24">
    <div class="bg-gray-50 rounded-2xl px-8 md:px-16 py-16 md:py-32">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-7/12 p-4">
                <img class="w-full object-contain" style="height:440px;" src="consulty-assets/http-codes/404-image.png" alt="">
            </div>
            <div class="w-full lg:w-5/12 p-4">
                <h1 class="tracking-tight text-4xl md:text-6xl font-medium mb-4">
                    <span>Oops!</span>
                    <br>
                    <span>Page not found</span>
                </h1>
                <p class="tracking-tight text-gray-700 text-lg mb-8 max-w-md">The page you are looking for either doesn’t exist or currently not available</p>
                <a href="#" class="bg-black h-14 rounded-full px-5 py-3 inline-flex items-center justify-center gap-2 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                    <span class="text-sm font-semibold tracking-tight text-white">Go Back to Home</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

HTTP codes from Suncealand

Tailwind CSS

Suncealand

Dark 404 Error Page Hero with Serif Heading and Red Arch Illustration

A dark full-screen 404 error page with a large serif heading, short explanatory text, and a light blue Homepage button on the left. On the right, red arch outlines frame two overlapping placeholder cards, one white and one dark gray, with abstract text-line skeletons.

<section class="pt-20 pb-32 lg:pt-52 bg-black overflow-hidden">
  <div class="relative container px-4 mx-auto">
    <div class="hidden lg:block absolute bottom-0 right-0 px-10">
      <img class="animate-bouncingSlow max-w-sm xl:max-w-md -mb-40 xl:-mb-52" src="suncealand-assets/background/red-lines.svg" alt="">
      <img class="absolute top-0 left-1/2 mt-20 transform -translate-x-1/2" src="suncealand-assets/images/black-white-message-app.png" alt="">
    </div>
    <div class="relative flex flex-wrap items-start">
      <div class="w-full lg:w-2/3 xl:w-1/2 mb-32 lg:mb-0">
        <div class="max-w-md xl:max-w-2xl mx-auto lg:mx-0">
          <div class="inline-flex px-5 py-2 items-center mb-8 rounded-full">
            <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
            <span class="uppercase text-sm text-gray-100 font-medium tracking-tight">404</span>
          </div>
          <h1 class="text-5xl sm:text-7xl xl:text-9xl font-heading font-semibold text-white mb-14">Oh, we lost that page</h1>
          <p class="max-w-sm text-lg text-gray-100 mb-14">Sorry, the page you’re looking for doesn’t exist or has been moved.</p>
          <a class="inline-flex h-14 mb-32 lg:mb-52 w-full sm:w-52 py-2.5 px-5 items-center justify-center text-base font-semibold text-black bg-blue-500 hover:bg-blue-600 rounded transition duration-300" href="#">Homepage</a>
          <div class="flex flex-wrap items-center justify-between">
            <span class="relative flex-shrink-0 inline-block mr-8 uppercase text-sm font-medium">
              <span class="absolute top-0 left-0 text-gray-200">Back to homepage</span>
              <span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">Back to homepage</span>
            </span>
            <span class="hidden relative flex-shrink-0 sm:inline-block mr-8 uppercase text-sm font-medium">
              <span class="absolute top-0 left-0 text-gray-200">Back to homepage</span>
              <span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">Back to homepage</span>
            </span>
            <span class="hidden relative flex-shrink-0 xl:inline-block mr-8 uppercase text-sm font-medium">
              <span class="absolute top-0 left-0 text-gray-200">Back to homepage</span>
              <span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">Back to homepage</span>
            </span>
          </div>
        </div>
      </div>
      <div class="w-full lg:hidden relative">
        <img class="animate-bouncingSlow mx-auto h-135 px-10 sm:px-0 -mb-52" src="suncealand-assets/background/red-lines.svg" alt="">
        <img class="absolute top-0 left-1/2 mt-10 w-full max-w-md transform -translate-x-1/2" src="suncealand-assets/images/black-white-message-app.png" alt="">
      </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 Cronos

404 Error Page with Illustration and Recovery Actions

HTTP codes from Casper

404 Error Page with Split-Screen Illustration

HTTP codes from Mirga

404 Error Page with Split Layout and Homepage Button

Your next website starts here

HTTP codes from Vista

Dark 404 Page Not Found Error State with Back to Home Button

HTTP codes from Flow

404 Error Page with Outlined Numerals and Back to Home Button

HTTP codes from Cyber

Cyberpunk 404 Error Page with Neural Pathway Message

HTTP codes from FilyTreck

Dark 404 Error Page with Back to Homepage Button

HTTP codes from Aurora

Dark Green 404 Error Page with Gradient Numerals and Homepage Link

HTTP codes from asitrastudio

404 Error Page with Split Architectural Imagery

HTTP codes from Consulty

404 Page Not Found Error Section with Home Button

HTTP codes from Suncealand

Dark 404 Error Page Hero with Serif Heading and Red Arch Illustration

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