JSFiddle - React, Tailwind, and code Playground

by mikeyaworski

HTML

<a id='get-link-16' class='small-button get-link' onclick='copyToClipboard("16");' data-clipboard-text='myText-16'><u>Get Link</u></a>

CSS

a.small-button:hover {
    background-color: #4A4A4A;
    cursor: pointer;
}
a.small-button:active {
    background-color: #5C5C5C;
    cursor: pointer;
}
a.small-button {
    font: bold 12px "Ubuntu", Helvetica, sans-serif;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-decoration: underline;
    background-color: #7A7A7A;
    color: #FFFFFF;
    padding: 2px 5px 2px 5px;
    cursor: pointer;
    margin-right: 10px;
}

JavaScript

new Clipboard(".get-link"); // initialize clipboard elements
$(function() {
  new Clipboard(".get-link"); // initialize clipboard elements
});

function copyToClipboard(id) {
  new Clipboard(".get-link");
  new Clipboard("#get-link-" + id);
  $("#get-link-" + id).text("Copied!");
  setTimeout(function(){ $("#get-link-" + id).text("Get Link"); }, 2000);
}