<div class="vt-bg-surface-page vt-flex vt-items-center vt-justify-center vt-p-8 vt-rounded-xl vt-min-h-[400px]">
  <div class="vt-text-center">
    <p class="vt-font-bold vt-text-foreground-muted/20 vt-leading-none vt-inline-6268fbcf32">404</p>
    <h1 class="vt-text-2xl vt-font-bold vt-mt-4">Page not found</h1>
    <p class="vt-text-sm vt-text-foreground-muted vt-mt-2 vt-max-w-xs vt-mx-auto">The page you are looking for does not exist or has been moved.</p>
    <a href="#" class="vt-btn vt-btn-primary vt-mt-8 vt-inline-flex">Go home</a>
  </div>
</div>

<div class="vt-bg-surface-page vt-flex vt-items-center vt-justify-center vt-p-8 vt-rounded-xl vt-min-h-[400px]">
  <div class="vt-text-center">
    <div class="vt-icon-badge vt-w-24 vt-h-24 vt-rounded-2xl vt-bg-warning-surface vt-mx-auto vt-mb-6">
      <svg class="vt-w-12 vt-h-12 vt-text-warning-fill" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path>
      </svg>
    </div>
    <h1 class="vt-text-2xl vt-font-bold">Oops! Nothing here</h1>
    <p class="vt-text-sm vt-text-foreground-muted vt-mt-2 vt-max-w-xs vt-mx-auto">Looks like this page took a wrong turn. Let us help you find your way back.</p>
    <div class="vt-flex vt-gap-3 vt-justify-center vt-mt-8">
      <button class="vt-btn vt-btn-bordered">Go back</button>
      <a href="#" class="vt-btn vt-btn-primary">Go home</a>
    </div>
  </div>
</div>

<div class="vt-bg-surface-page vt-flex vt-items-center vt-justify-center vt-p-8 vt-rounded-xl vt-min-h-[400px]">
  <div class="vt-text-center vt-w-full vt-max-w-md">
    <p class="vt-font-bold vt-text-foreground-muted/20 vt-leading-none vt-inline-9fbcc3feef" id="not-found-3-1">404</p>
    <h1 class="vt-text-xl vt-font-bold vt-mt-4">Page not found</h1>
    <p class="vt-text-sm vt-text-foreground-muted vt-mt-2" id="not-found-3-2">Try searching for what you need.</p>
    <div class="vt-mt-6">
      <input type="text" placeholder="Search..." class="vt-input" aria-label="Search..." aria-describedby="not-found-3-1 not-found-3-2">
    </div>
    <div class="vt-flex vt-flex-wrap vt-gap-2 vt-justify-center vt-mt-6 vt-items-center">
      <a href="#" class="vt-text-sm vt-text-info-fill">Home</a>
      <span class="vt-text-foreground-muted">·</span>
      <a href="#" class="vt-text-sm vt-text-info-fill">Components</a>
      <span class="vt-text-foreground-muted">·</span>
      <a href="#" class="vt-text-sm vt-text-info-fill">Docs</a>
    </div>
  </div>
</div>