<div class="card w-full max-w-sm">
  <div class="card-content grid gap-6">
    <div>
      <h3 class="text-lg font-semibold tracking-tight">Share Document</h3>
      <p class="text-sm/6 text-muted-foreground mt-2">
        Invite others to view or edit this document and work together
        seamlessly.
      </p>
    </div>
    <div class="flex gap-2">
      <input
        class="input flex-1"
        type="text"
        readonly=""
        value="https://example.com/doc/abc123"
      />
      <button class="btn btn-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
      </button>
    </div>
    <div class="separator"></div>
    <div class="grid gap-6">
      <span class="text-sm font-medium">People with access</span>
      <div class="flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
          <img
            class="avatar"
            src="https://cdn.gufo.dev/stockphotos/1c7a7245.webp"
            alt="Sarah Johnson"
          />
          <div class="text-sm">
            <p class="font-semibold text-foreground">Sarah Johnson</p>
            <p class="text-muted-foreground">[email protected]</p>
          </div>
        </div>
        <select class="select h-8 w-22">
          <option value="write">Write</option>
          <option value="read">Read</option>
        </select>
      </div>
      <div class="flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
          <img
            class="avatar"
            src="https://cdn.gufo.dev/stockphotos/7bd8889a.webp"
            alt="Michael Chen"
          />
          <div class="text-sm">
            <p class="font-semibold text-foreground">Michael Chen</p>
            <p class="text-muted-foreground">[email protected]</p>
          </div>
        </div>
        <select class="select h-8 w-22">
          <option value="read">Read</option>
          <option value="write">Write</option>
        </select>
      </div>
      <div class="flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
          <img
            class="avatar"
            src="https://cdn.gufo.dev/stockphotos/a8a338c1.webp"
            alt="Emma Wilson"
          />
          <div class="text-sm">
            <p class="font-semibold text-foreground">Emma Wilson</p>
            <p class="text-muted-foreground">[email protected]</p>
          </div>
        </div>
        <select class="select h-8 w-22">
          <option value="read">Read</option>
          <option value="write">Write</option>
        </select>
      </div>
    </div>
  </div>
</div>