JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://clipboardjs.com/assets/styles/main.css">
<link rel="stylesheet" href="https://clipboardjs.com/bower_components/highlightjs/styles/github.css">
<link rel="stylesheet" href="https://clipboardjs.com/bower_components/primer-css/css/primer.css">
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
<script src="https://clipboardjs.com/bower_components/highlightjs/highlight.pack.min.js"></script>
<script src="https://clipboardjs.com/assets/scripts/demos.js"></script>
<script src="https://clipboardjs.com/assets/scripts/snippets.js"></script>
<script src="https://clipboardjs.com/assets/scripts/tooltips.js"></script>


<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn&#39;t mean you should — clipboard.js">Copy to clipboard</button>
</div>
<pre class="snippet"><button class="btn" data-clipboard-snippet=""><img class="clippy" width="13" src="./index_files/clippy.svg" alt="Copy to clipboard"></button><code class="html hljs xml"><span class="hljs-comment">&lt;!-- Trigger --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn"</span> <span class="hljs-attribute">data-clipboard-text</span>=<span class="hljs-value">"Just because you can doesn't mean you should — clipboard.js"</span>&gt;</span>
    Copy to clipboard
<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span></code></pre>

    <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>