Clipboard

Copy

<div class="clipboard">
    <form class="form-horizontal">
        <label for="input-copy" class="set-label">Input URL</label>
        <input type="text" id="input-copy" class="fp-input block w-full py-2.5 text-sm disabled:opacity-50 disabled:pointer-events-none mb-4" value="http://www.admin-dashboard.com">
        <div class="flex flex-wrap align-items-center gap-2">
            <a class="btn inline-flex items-center bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:border-primary-900 hover:text-white" href="javascript:void(0);" data-clipboard-action="copy" data-clipboard-target="#input-copy"><i data-lucide="clipboard" class="w-4 h-4 me-1"></i> Copy from Input</a>
            <a class="btn inline-flex items-center bg-[var(--surface)] border border-[var(--border)] c-text text-center hover:bg-[var(--card2)]" href="javascript:void(0);" data-clipboard-action="cut" data-clipboard-target="#input-copy"><i data-lucide="scissors" class="w-4 h-4 me-1"></i> Cut from Input</a>
        </div>
    </form>
</div>

Copy

<div class="clipboard">
    <form class="form-horizontal">
        <label for="input-copy2" class="set-label">Input URL</label>
        <input type="text" id="input-copy2" class="fp-input block w-full py-2.5 text-sm disabled:opacity-50 disabled:pointer-events-none mb-4" value="http://www.admin-dashboard.com">
        <div class="flex flex-wrap align-items-center gap-2">
            <a class="btn inline-flex items-center bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:border-primary-900 hover:text-white" href="javascript:void(0);" data-clipboard-action="copy" data-clipboard-target="#input-copy2"><i data-lucide="clipboard" class="w-4 h-4 me-1"></i> Copy from Input</a>
            <a class="btn inline-flex items-center bg-[var(--surface)] border border-[var(--border)] c-text text-center hover:bg-[var(--card2)]" href="javascript:void(0);" data-clipboard-action="cut" data-clipboard-target="#input-copy2"><i data-lucide="scissors" class="w-4 h-4 me-1"></i> Cut from Input</a>
        </div>
    </form>
</div>

Copy

<div class="clipboard">
    <form class="form-horizontal">
        <label for="textarea-copy" class="set-label">Text Area</label>
        <textarea id="textarea-copy" class="fp-input block w-full py-2.5 text-sm disabled:opacity-50 disabled:pointer-events-none mb-4" rows="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</textarea>
        <div class="flex flex-wrap align-items-center gap-2">
            <a class="btn inline-flex items-center bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:border-primary-900 hover:text-white" href="javascript:void(0);" data-clipboard-action="copy" data-clipboard-target="#textarea-copy"><i data-lucide="clipboard" class="w-4 h-4 me-1"></i> Copy from Input</a>
            <a class="btn inline-flex items-center bg-[var(--surface)] border border-[var(--border)] c-text text-center hover:bg-[var(--card2)]" href="javascript:void(0);" data-clipboard-action="cut" data-clipboard-target="#textarea-copy"><i data-lucide="scissors" class="w-4 h-4 me-1"></i> Cut from Input</a>
        </div>
    </form>
</div>

Copy

<div class="clipboard">
    <form class="form-horizontal">
        <p class="mb-1 c-text text-sm">Here is your OTP <span id="paragraph-copy1">22991</span>.</p>
        <p class="mb-4 c-text text-sm">Please do not share it to anyone</p>
        <div class="flex flex-wrap align-items-center gap-2">
            <a class="btn inline-flex items-center bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:border-primary-900 hover:text-white" href="javascript:void(0);" data-clipboard-action="copy" data-clipboard-target="#paragraph-copy1"><i data-lucide="clipboard" class="w-4 h-4 me-1"></i> Copy from Input</a>
        </div>
    </form>
</div>

Copy

<div class="clipboard">
    <form class="form-horizontal">
        <p class="mb-4 c-text text-sm">Link -> <span id="advanced-paragraph">http://www.example.com/example</span></p>
        <div class="flex flex-wrap align-items-center gap-2">
            <a class="btn inline-flex items-center bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:border-primary-900 hover:text-white" href="javascript:void(0);" data-clipboard-action="copy" data-clipboard-target="#advanced-paragraph"><i data-lucide="clipboard" class="w-4 h-4 me-1"></i> Copy from Input</a>
            <a class="btn inline-flex items-center bg-warning border border-warning text-white text-center hover:bg-warning-900 hover:border-warning-900 hover:text-white" href="javascript:void(0);" data-clipboard-action="copy" data-clipboard-text="2291"><i data-lucide="clipboard" class="w-4 h-4 me-1"></i> Copy Hidden Code</a>
        </div>
    </form>
</div>