<button
  type="button"
  class="btn btn-primary"
  data-sp-toggle="dialog"
  data-sp-target="#dialog-5"
>
  View invitation
</button>
<dialog
  id="dialog-5"
  class="dialog"
  aria-labelledby="dialog-5-title"
  aria-describedby="dialog-5-description"
>
  <div class="dialog-backdrop"></div>
  <div class="dialog-panel">
    <button
      type="button"
      class="btn btn-ghost btn-icon-xs absolute top-3 right-3"
      aria-label="Close"
      data-sp-dismiss="dialog"
    >
      <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" class="size-4"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
    </button>
    <div class="dialog-content grid gap-6">
      <div>
        <div class="avatar-group justify-center mb-4">
          <img
            class="avatar avatar-group-item"
            src="https://cdn.gufo.dev/stockphotos/1c7a7245.webp"
            alt="Emma Wilson"
          />
          <img
            class="avatar avatar-group-item"
            src="https://cdn.gufo.dev/stockphotos/7bd8889a.webp"
            alt="Michael Chen"
          />
          <img
            class="avatar avatar-group-item"
            src="https://cdn.gufo.dev/stockphotos/a8a338c1.webp"
            alt="Sarah Johnson"
          />
        </div>
        <h2
          id="dialog-5-title"
          class="text-lg font-semibold tracking-tight text-center"
        >
          Welcome to Team Atlas
        </h2>
        <p
          id="dialog-5-description"
          class="text-sm/6 text-muted-foreground mt-2 text-center"
        >
          You&#x27;ve been added as a Member. Say hi to your new teammates and
          start collaborating.
        </p>
      </div>
      <button type="button" class="btn btn-primary" data-sp-dismiss="dialog">
        Get started
      </button>
    </div>
  </div>
</dialog>