Tailwind CSS Share Dialog

<div class="card w-full max-w-sm">
  <div class="card-header">
    <h3 class="card-title">Share Document</h3>
    <p class="card-description">
      Invite others to view or edit this document and work together seamlessly.
    </p>
  </div>
  <div class="card-content flex flex-col gap-6">
    <div class="flex gap-2">
      <input
        class="input flex-1"
        type="text"
        readonly=""
        aria-label="Document link"
        value="https://example.com/doc/abc123"
      /><button class="btn btn-outline btn-icon" aria-label="Copy link">
        <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>
    <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">
        <span class="avatar avatar-lg"
          ><img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&amp;h=640&amp;fit=facearea&amp;facepad=3.2&amp;auto=format&amp;q=100&amp;bg-remove=true&amp;bg=e5e5e5"
            alt="Leila Navarro"
          /><span class="avatar-fallback">LN</span></span
        >
        <div class="text-sm">
          <p class="font-medium text-foreground">Leila Navarro</p>
          <p class="text-muted-foreground">[email protected]</p>
        </div>
      </div>
      <select class="select h-8 w-22" aria-label="Permission for Leila Navarro">
        <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">
        <span class="avatar avatar-lg"
          ><img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&amp;h=640&amp;fit=facearea&amp;facepad=3&amp;auto=format&amp;q=100&amp;bg-remove=true&amp;bg=e5e5e5"
            alt="Theo Marchetti"
          /><span class="avatar-fallback">TM</span></span
        >
        <div class="text-sm">
          <p class="font-medium text-foreground">Theo Marchetti</p>
          <p class="text-muted-foreground">[email protected]</p>
        </div>
      </div>
      <select
        class="select h-8 w-22"
        aria-label="Permission for Theo Marchetti"
      >
        <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">
        <span class="avatar avatar-lg"
          ><img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&amp;h=640&amp;fit=facearea&amp;facepad=3.2&amp;auto=format&amp;q=100&amp;bg-remove=true&amp;bg=e5e5e5"
            alt="Maya Santoso"
          /><span class="avatar-fallback">MS</span></span
        >
        <div class="text-sm">
          <p class="font-medium text-foreground">Camille Laurent</p>
          <p class="text-muted-foreground">[email protected]</p>
        </div>
      </div>
      <select
        class="select h-8 w-22"
        aria-label="Permission for Camille Laurent"
      >
        <option value="read">Read</option>
        <option value="write">Write</option>
      </select>
    </div>
  </div>
</div>