Card

<link rel="preload" as="image" href="/media/avatars/1.png" /><link
  rel="preload"
  as="image"
  href="/media/avatars/2.png"
/><link rel="preload" as="image" href="/media/avatars/3.png" /><link
  rel="preload"
  as="image"
  href="/media/avatars/4.png"
/><link rel="preload" as="image" href="/media/avatars/5.png" />
<div class="kt-card w-[400px]">
  <div class="kt-card-header">
    <div class="kt-card-heading">
      <h2 class="kt-card-title">Recent Users</h2>
    </div>
    <div class="kt-card-toolbar">
      <button type="button" class="kt-btn kt-btn-xs kt-btn-outline kt-btn-icon">
        <svg
          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"
          class="lucide lucide-settings"
          aria-hidden="true"
        >
          <path
            d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
          ></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
      </button>
    </div>
  </div>
  <div class="kt-card-content py-1">
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/1.png" alt="Kathryn Campbell" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Kathryn Campbell</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            kathryn@apple.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/2.png" alt="Robert Smith" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Robert Smith</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            robert@openai.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-secondary">Inactive</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/3.png" alt="Sophia Johnson" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Sophia Johnson</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            sophia@meta.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/4.png" alt="Lucas Walker" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Lucas Walker</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            lucas@tesla.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-secondary">Inactive</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/5.png" alt="Emily Davis" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Emily Davis</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            emily@sap.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
  </div>
  <div class="kt-card-footer justify-center">
    <button class="kt-link kt-link-underlined underline-dashed">
      Learn more
    </button>
  </div>
</div>

<link rel="preload" as="image" href="/media/avatars/1.png" /><link
  rel="preload"
  as="image"
  href="/media/avatars/2.png"
/><link rel="preload" as="image" href="/media/avatars/3.png" /><link
  rel="preload"
  as="image"
  href="/media/avatars/4.png"
/><link rel="preload" as="image" href="/media/avatars/5.png" />
<div class="kt-card kt-card-accent w-[400px]">
  <div class="kt-card-header">
    <div class="kt-card-heading">
      <h2 class="kt-card-title">Recent Users</h2>
    </div>
    <div class="kt-card-toolbar">
      <button type="button" class="kt-btn kt-btn-xs kt-btn-outline kt-btn-icon">
        <svg
          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"
          class="lucide lucide-settings"
          aria-hidden="true"
        >
          <path
            d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
          ></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
      </button>
    </div>
  </div>
  <div class="kt-card-content py-1">
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/1.png" alt="Kathryn Campbell" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Kathryn Campbell</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            kathryn@apple.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/2.png" alt="Robert Smith" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Robert Smith</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            robert@openai.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-secondary">Inactive</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/3.png" alt="Sophia Johnson" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Sophia Johnson</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            sophia@meta.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/4.png" alt="Lucas Walker" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Lucas Walker</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            lucas@tesla.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-secondary">Inactive</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/5.png" alt="Emily Davis" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Emily Davis</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            emily@sap.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
  </div>
  <div class="kt-card-footer justify-center">
    <button class="kt-link kt-link-underlined underline-dashed">
      Learn more
    </button>
  </div>
</div>