JSFiddle - React, Tailwind, and code Playground

by MakkerHeineken

HTML

<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<script src="assets/plugins/global/plugins.bundle.js"></script>

<div class="card card-bordered">
  <div class="card-body">
    <!--begin::Row-->
    <div class="d-flex align-items-center flex-wrap">
      <!--begin::Input-->
      <div id="kt_clipboard_4" class="me-5">This is a sample static text string to copy !</div>
      <!--end::Input-->

      <!--begin::Button-->
      <button class="btn btn-icon btn-sm btn-light" data-clipboard-target="#kt_clipboard_4">
        <!--begin::Svg Icon | path: icons/duotune/general/gen054.svg-->
      </button>
      <!--end::Button-->
    </div>
    <!--end::Row-->
  </div>
</div>

JavaScript

// Select elements
const target = document.getElementById('kt_clipboard_4');
const button = target.nextElementSibling;

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
clipboard = new ClipboardJS(button, {
  target: target,
  text: function() {
    return target.innerHTML;
  }
});

// Success action handler
clipboard.on('success', function(e) {
  var checkIcon = button.querySelector('.bi.bi-check');
  var svgIcon = button.querySelector('.svg-icon');

  // Exit check icon when already showing
  if (checkIcon) {
    return;
  }

  // Create check icon
  checkIcon = document.createElement('i');
  checkIcon.classList.add('bi');
  checkIcon.classList.add('bi-check');
  checkIcon.classList.add('fs-2x');

  // Append check icon
  button.appendChild(checkIcon);

  // Highlight target
  const classes = ['text-success', 'fw-boldest'];
  target.classList.add(...classes);

  // Highlight button
  button.classList.add('btn-success');

  // Hide copy icon
  svgIcon.classList.add('d-none');

  // Revert button label after 3 seconds
  setTimeout(function() {
    // Remove check icon
    svgIcon.classList.remove('d-none');

    // Revert icon
    button.removeChild(checkIcon);

    // Remove target highlight
    target.classList.remove(...classes);

    // Remove button highlight
    button.classList.remove('btn-success');
  }, 3000)
});