<div class="card">
  <div class="card-content grid gap-6">
    <div class="grid gap-2">
      <h3 class="text-lg/6 font-semibold">Share Document</h3>
      <p class="text-sm/6 text-muted-foreground">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-outline 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-copy" aria-hidden="true">
          <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://images.pexels.com/photos/2773682/pexels-photo-2773682.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop" alt="Sarah Johnson" />
          <div class="grid gap-1.5">
            <span class="text-sm/none font-medium">Sarah Johnson</span>
            <span class="text-xs/none text-muted-foreground font-medium">sarah@example.com</span>
          </div>
        </div>
        <select class="select select-sm 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://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop" alt="Michael Chen" />
          <div class="grid gap-1.5">
            <span class="text-sm/none font-medium">Michael Chen</span>
            <span class="text-xs/none text-muted-foreground font-medium">michael@example.com</span>
          </div>
        </div>
        <select class="select select-sm 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://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop" alt="Emma Wilson" />
          <div class="grid gap-1.5">
            <span class="text-sm/none font-medium">Emma Wilson</span>
            <span class="text-xs/none text-muted-foreground font-medium">emma@example.com</span>
          </div>
        </div>
        <select class="select select-sm w-22">
          <option value="read">Read</option>
          <option value="write">Write</option>
        </select>
      </div>
    </div>
  </div>
</div>