Tailwind CSS Blank & Error Pages Blocks

Blank & Error Pages

Blank upgrade pages and error screens for dashboard shells, admin layouts, and utility page scaffolding.

Upgrade Prompt Page Pro

Centered upgrade state with a badge, illustration, short copy block, and primary action.

<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-linear-to-tl from-primary-100 to-violet-200 text-primary-800">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>
            Available with growth
          </span>

<h1 class="text-xl font-semibold text-foreground">
            Improve performance with analytics
          </h1>

<p class="text-sm text-muted-foreground-1">
            Unlock the power of analytics to boost team performance, stay on top of your workload, and deliver exceptional customer service.
          </p>

<div class="flex justify-center items-center gap-x-3">
            <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none" href="#">
              Upgrade
            </a>

<button type="button" class="inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline">
              Learn more
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </div>
        </div>
        
      </div>
    </main>

Dashboard 404 Error Page Pro

Sidebar-shell error layout with one centered 404 message block and recovery action.

<main id="content" class="lg:ps-65 min-h-screen flex flex-col justify-center">
      <div class="p-2 sm:p-5 sm:pb-0 space-y-5 text-center">
        
        <div class="max-w-md mx-auto space-y-3">
          <h1 class="leading-none text-8xl font-semibold text-foreground">
            404
          </h1>
          <h2 class="text-3xl font-medium text-foreground">
            Page not found
          </h2>
          <p class="text-muted-foreground-1">
            Sorry, the page you're looking for cannot be found.
          </p>
          <div>
            <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-start bg-primary border border-primary-line text-primary-foreground text-xs sm:text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>Back to home
            </button>
          </div>
        </div>
        
      </div>
    </main>

Dashboard 500 Error Page Pro

Sidebar-shell error layout with one centered 500 message block and retry action.

<main id="content" class="lg:ps-65 min-h-screen flex flex-col justify-center">
      <div class="p-2 sm:p-5 sm:pb-0 space-y-5 text-center">
        
        <div class="max-w-md mx-auto space-y-3">
          <h1 class="leading-none text-8xl font-semibold text-foreground">
            500
          </h1>
          <h2 class="text-3xl font-medium text-foreground">
            Internal server error
          </h2>
          <p class="text-muted-foreground-1">
            The server encountered an internal error or misconfiguration and was unable to complete your request.
          </p>
          <div>
            <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-start bg-primary border border-primary-line text-primary-foreground text-xs sm:text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus">
              Reload page
            </button>
          </div>
        </div>
        
      </div>
    </main>

Centered 404 Error Page Free

Minimal 404 page with a small brand header, centered message, and single action button.

<div class="max-w-3xl flex flex-col mx-auto size-full">
  
  <header class="mb-auto flex justify-center z-50 w-full py-4">
    <nav class="px-4 sm:px-6 lg:px-8">
      <a class="flex-none text-xl font-semibold sm:text-3xl text-foreground" href="#" aria-label="Brand">Brand</a>
    </nav>
  </header>
  
  
  
  <main id="content">
    <div class="text-center py-10 px-4 sm:px-6 lg:px-8">
      <h1 class="block text-7xl font-bold text-foreground sm:text-9xl">404</h1>
      <p class="mt-3 text-muted-foreground-2">Oops, something went wrong.</p>
      <p class="text-muted-foreground-2">Sorry, we couldn't find your page.</p>
      <div class="mt-5 flex flex-col justify-center items-center gap-2 sm:flex-row sm:gap-3">
        <a class="w-full sm:w-auto py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="../../../blocks/">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
          Back to blocks
        </a>
      </div>
    </div>
  </main>

<footer class="mt-auto text-center py-5">
    <div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8">
      <p class="text-sm text-muted-foreground-1">© All Rights Reserved. 2022.</p>
    </div>
  </footer>
  
</div>