Copy from input
<div class="clipboard">
<form class="form-horizontal">
<input type="text" id="input-copy" class="mb-4 w-full form-input block bg-light border-border-color rounded-lg focus:border-primary disabled:opacity-50 disabled:pointer-events-none" 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 class="icon icon-clipboard me-1"></i> Copy from Input</a>
<a class="btn inline-flex items-center bg-dark border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white dark:bg-gray-100 dark:border-gray-100" href="javascript:void(0);" data-clipboard-action="cut" data-clipboard-target="#input-copy"><i class="icon icon-scissors me-1"></i> Cut from Input</a>
</div>
</form>
</div>
Copy from input
<div class="clipboard">
<form class="form-horizontal">
<input type="text" id="input-copy" class="mb-4 w-full form-input block bg-light border-border-color rounded-lg focus:border-primary disabled:opacity-50 disabled:pointer-events-none" 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 class="icon icon-clipboard me-1"></i> Copy from Input</a>
<a class="btn inline-flex items-center bg-dark border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white" href="javascript:void(0);" data-clipboard-action="cut" data-clipboard-target="#input-copy"><i class="icon icon-scissors me-1"></i> Cut from Input</a>
</div>
</form>
</div>
Copy from Text Area
<div class="clipboard">
<form class="form-horizontal">
<textarea id="textarea-copy" class="mb-4 py-2.5 px-2.5 sm:py-2.5 sm:px-2.5 block w-full bg-light border-border-color rounded-lg sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" 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 class="icon icon-clipboard me-1"></i> Copy from Input</a>
<a class="btn inline-flex items-center bg-dark border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white" href="javascript:void(0);" data-clipboard-action="cut" data-clipboard-target="#textarea-copy"><i class="icon icon-scissors me-1"></i> Cut from Input</a>
</div>
</form>
</div>
Copy Text from Paragraph
<div class="clipboard">
<form class="form-horizontal">
<p class="mb-1">Here is your OTP <span id="paragraph-copy1">22991</span>.</p>
<p class="mb-4">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 class="icon icon-clipboard me-1"></i> Copy from Input</a>
</div>
</form>
</div>
Copy Hidden Text (Advanced)
<div class="clipboard">
<form class="form-horizontal">
<p class="mb-4">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 class="icon icon-clipboard 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 class="icon icon-clipboard me-1"></i> Copy Hidden Code</a>
</div>
</form>
</div>