<button
  type="button"
  class="btn btn-primary"
  data-sp-toggle="dialog"
  data-sp-target="#dialog-3"
>
  Publish
</button>
<dialog
  id="dialog-3"
  class="dialog"
  aria-labelledby="dialog-3-title"
  aria-describedby="dialog-3-description"
>
  <div class="dialog-backdrop"></div>
  <div class="dialog-panel">
    <div class="dialog-content grid gap-6">
      <img
        src="https://images.pexels.com/photos/7932264/pexels-photo-7932264.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=640&amp;fit=crop"
        alt="Project cover"
        class="rounded-lg aspect-3/2 w-full object-cover"
      />
      <div>
        <h2 id="dialog-3-title" class="text-lg font-semibold tracking-tight">
          Project launched
        </h2>
        <p
          id="dialog-3-description"
          class="text-sm/6 text-muted-foreground mt-2"
        >
          Your project is now live. We&#x27;ve notified your team and posted an
          update to your channel.
        </p>
      </div>
      <div class="grid grid-cols-2 gap-2">
        <button type="button" class="btn">
          <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"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
          Copy link
        </button>
        <button type="button" class="btn btn-primary" data-sp-dismiss="dialog">
          Finish
        </button>
      </div>
    </div>
  </div>
</dialog>