Empty State

Also known as a blank state, the empty state is basically a screen you encounter when there's no data to display.

files illustration

You don’t seem to have any folder

Basically a screen you encounter when there’s no data to display.

<div class="max-w-xl mx-auto">
  <img class="size-20 mx-auto" src="https://html.tailus.io/empty/files.png" alt="empty folder" width="560" height="560" loading="eager"/>

  <div class="mt-6 text-center">
      <h1 class="text-title font-semibold text-lg">You don’t seem to have any folder</h1>
      <p class="max-w-xs mx-auto text-body mt-2 mb-6 text-sm">Basically a screen you encounter when there’s no data to display.</p>

      <button class="btn variant-outlined sz-sm mx-auto">
          <span class="btn-label">Add new folder</span>
      </button>
  </div>
</div>