<div
id="container-example"
class="fixed right-0 top-0 z-[2000] mr-3 mt-[59px] hidden w-1/4 items-center rounded-lg bg-primary-100 px-6 py-4 text-base text-primary-800 data-[te-alert-show]:inline-flex"
role="alert"
data-te-alert-init
data-te-autohide="true"
data-te-delay="4000">
Text copied!
</div>
<div class="flex w-full">
<div class="relative mb-3 w-full" data-te-input-wrapper-init>
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
id="copy-target-4"
placeholder="Example label" />
<label
for="copy-target"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>Type here text to copy
</label>
</div>
<div>
<button
id="myExample"
type="button"
data-te-clipboard-init
data-te-clipboard-target="#copy-target-4"
data-te-ripple-init
data-te-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
Copy
</button>
</div>
</div>
// Initialization for ES Users
import {
Alert,
Clipboard,
Input,
Ripple,
initTE,
} from "tw-elements";
initTE({ Alert, Clipboard, Input, Ripple });
const myExample = document.getElementById("myExample");
const alertInstance = Alert.getInstance(
document.getElementById("container-example")
);
myExample.addEventListener("copy.te.clipboard", () => {
myExample.innerText = "Copied!";
alertInstance.show();
setTimeout(() => {
myExample.innerText = "COPY";
}, 4000);
});
const myExample = document.getElementById("myExample");
const alertInstance = te.Alert.getInstance(
document.getElementById("container-example")
);
myExample.addEventListener("copy.te.clipboard", () => {
myExample.innerText = "Copied!";
alertInstance.show();
setTimeout(() => {
myExample.innerText = "COPY";
}, 4000);
});