JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div id="secretInfo">HGDI-UGHT-KYRB-KQNR</div>
    <p id='copy_notification'></p>

CSS

#secretInfo {
    cursor: pointer;
}

JavaScript

var $body = document.getElementsByTagName('body')[0];
      var $btnCopy = document.getElementById('secretInfo');
      var secretInfo = document.getElementById('secretInfo').innerHTML;
      var copyToClipboard = function(secretInfo) {
        var $tempInput = document.createElement('INPUT');
        $body.appendChild($tempInput);
        $tempInput.setAttribute('value', secretInfo)
        $tempInput.select();
        document.execCommand('copy');
        $body.removeChild($tempInput);
      }
      $btnCopy.addEventListener('click', function(ev) {
        copyToClipboard(secretInfo);

        $(document.getElementById('copy_notification')).text("Code Copied").css('color', '#04b600').fadeIn(500).delay(1000).fadeOut();
      });