1. Plugins
  2. Copy Markup


Tailwind CSS Copy Markup

Copy input, select or other markups

Image Description


To get started, install Copy Markup plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                        npm i @preline/copy-markup


Add input fields.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                        <div id="hs-wrapper-for-copy">
                          <input id="hs-content-for-copy" type="text" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm text-gray-800 focus:z-10 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:placeholder:text-gray-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" placeholder="Enter Name">

                        <button type="button" data-hs-copy-markup='{
                            "targetSelector": "#hs-content-for-copy",
                            "wrapperSelector": "#hs-wrapper-for-copy",
                            "limit": 3
                          }' id="hs-copy-content">
                          Add Name


Name Description Options Default value
data-hs-copy-markup Activate a Copy Markup by specifying on an element.
:targetSelector Specifies the target element to copy. The value must be a valid selector. string
:wrapperSelector Specifies which element should be used for copying. The value must be a valid selector. string
:limit Specifies how many items you can copy until the button is disabled. number null


The HSCopyMarkup object is contained within the global window object

Method Description
Public methods
delete(target) Remove the element associated to the target.
  • target should be a Node
Static methods
HSCopyMarkup.getInstance(target, isInstance) Returns the element associated to the target.
  • target should be a Node or string (valid selector)
  • isInstance boolean. Returns the instance instead of Node if true

Open item (public method).

                        const copyMarkup = new HSCopyMarkup(document.querySelector('#copy-markup'));
                        const deleteBtn = document.querySelector('#delete-btn');

                        deleteBtn.addEventListener('click', () => {

Open item (mixed).

                        const { element } = HSCopyMarkup.getInstance('#copy-markup', true);
                        const deleteBtn = document.querySelector('#delete-btn');

                        deleteBtn.addEventListener('click', () => {


Method Description Returned value
on:copy Called when target element was copied. Copied element
on:delete Called when target element was deleted. Deleted element

Call any function on copy example.

                        const el = HSCopyMarkup.getInstance('#copy-markup');

                        el.on('copy', (copiedElement) => {...});

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Image Description
Check out Preline UI Copy Markup