JSFiddle - React, Tailwind, and code Playground

HTML

<div id='test'>Select text, it'll copy on mouse up</div>
<div id='test2'>Copy text using ctrl-c</div>
<div id='test3'>On click, it'll copy cutom content</div>

CSS

ct text, it'll cocustom contentcustom content from clickwindow.clipboardData.setData('Text', 'custom content')window.clipboardData.setData('Text', 'custom content')custom contentcustom content from click

JavaScript

var elem = document.getElementById('test');
var elem2 = document.getElementById('test2');
var elem3 = document.getElementById('test3');
elem.onmouseup = function () {
    document.execCommand('copy');
}

elem2.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content');
    }

});

elem3.onclick = function () {
    document.execCommand('copy');
}

elem3.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content from click');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content from click');
    }

});