<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
      class="btn h-6 shrink-0 rounded-sm bg-white/20 px-2 text-xs text-white active:bg-white/25"
      @click="$clipboard({
        content:document.querySelector('#clipboardContent1').innerText,
        success:()=>$notification({text:'Text Copied',variant:'success'}),
        error:()=>$notification({text:'Error',variant:'error'})
      })"
    >
      Copy
    </button>
  </div>

              

                
  <div x-data="{text:''}">
    <div class="flex -space-x-px">
      <input
        x-model="text"
        class="form-input w-full rounded-r-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
        @click="$clipboard({
                content:text,
                success:()=>$notification({text:'Text Copied',variant:'success'}),
                error:()=>$notification({text:'Error',variant:'error'})
            })"
        class="btn z-2 rounded-r-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>
  </div>