basecoat/docs/_includes/components/skeleton.njk

<section id="skeleton" class="w-full rounded-lg border scroll-mt-16">
  <header class="border-b px-4 py-3">
    <h2 class="text-sm font-medium">Skeleton</h2>
  </header>
  <div class="p-4">
    <div class="flex flex-col gap-4">
      <div class="flex items-center gap-4">
        <div class="bg-accent animate-pulse size-10 shrink-0 rounded-full"></div>
        <div class="grid gap-2">
          <div class="bg-accent animate-pulse rounded-md h-4 w-[150px]"></div>
          <div class="bg-accent animate-pulse rounded-md h-4 w-[100px]"></div>
        </div>
      </div>
      
      <div class="flex gap-4 w-full">
        <div class="card w-full @md:w-auto @md:min-w-sm">
          <header>
            <div class="bg-accent animate-pulse rounded-md h-4 w-2/3"></div>
            <div class="bg-accent animate-pulse rounded-md h-4 w-1/2"></div>
          </header>
          <section>
            <div class="bg-accent animate-pulse rounded-md aspect-square w-full"></div>
          </section>
        </div>

        <div class="card w-full @md:w-auto @md:min-w-sm">
          <header>
            <div class="bg-accent animate-pulse rounded-md h-4 w-2/3"></div>
            <div class="bg-accent animate-pulse rounded-md h-4 w-1/2"></div>
          </header>
          <section>
            <div class="bg-accent animate-pulse rounded-md aspect-square w-full"></div>
          </section>
        </div>
      </div>
  </div>
</section>