<div
    class="alert flex items-center justify-between rounded-lg bg-primary px-4 py-3 text-white dark:bg-accent sm:px-5"
  >
    <p id="clipboardContent1">Lorem ipsum dolor sit amet consectetur.</p>
    <button
      id="getContent1"
      class="btn h-6 shrink-0 rounded bg-white/20 px-2 text-xs text-white active:bg-white/25"
    >
      Copy
    </button>
  </div>

  <!-- Javascript -->

  <script>
    const onSuccess = () =>
      $notification({ text: "Text Copied", variant: "success" });

    const onError = () => $notification({ text: "Error", variant: "error" });

    const contentEl = document.querySelector("#clipboardContent1");

    const copyBtn = document.querySelector("#getContent1");

    copyBtn.addEventListener("click", () => {
      $clipboard({
        content: contentEl.innerText,
        success: onSuccess,
        error: onError,
      });
    });
  </script>
                
              

                
  <div class="flex -space-x-px">
    <input
      id="clipboardContent2"
      class="form-input w-full rounded-l-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Enter text"
      type="text"
    />

    <button
      id="getContent2"
      class="btn z-2 rounded-l-none bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
    >
      Copy
    </button>
  </div>

  <!-- Javascript -->

  <script>
    const onSuccess = () =>
      $notification({ text: "Text Copied", variant: "success" });

    const onError = () => $notification({ text: "Error", variant: "error" });

    const contentEl = document.querySelector("#clipboardContent2");

    const copyBtn = document.querySelector("#getContent2");

    copyBtn.addEventListener("click", () => {
      $clipboard({
        content: contentEl.value,
        success: onSuccess,
        error: onError,
      });
    });
  </script>