JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.1/clipboard.min.js"></script>
<table class="table" border="1">
    <tr>
        <th>Header</th>
    </tr>
    <tr>
        <td class="btn">This will be highlighted on click. It should also be copied to clipboard automatically</td>
    </tr>
</table>

CSS

table {
    table-layout: fixed;
    width: 170px;
    height: 35px;
    font-size: 14px;
    color:#333333;
    width:100%;
    border-width: 1px;
    border-color: #9dcc7a;
    border-collapse: collapse;
}
table td {
    font-size: 12px;
    border-width: 1px;
    padding: 10px;
    border-style: solid;
    border-color: #9dcc7a;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 225px;
    white-space: nowrap;
}
table th {
    font-size:12px;
    color: black;
    background-color:#ffff99;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #9dcc7a;
    text-align: center;
    width: 230px;
}
#table tr {
    background-color:#ffffff;
}
#table tr:hover {
    background-color:#ffff99;
}
::selection {
    background-color: orange;
    color: blue;
}
#tableheader th {
    font-size:12px;
    background-color:#abd28e;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #9dcc7a;
    text-align: left;
    width: 230px;

JavaScript

var clipboard = new Clipboard('.btn', {
    // The selection of the correct content is done here.
    text: function(trigger) {
        return trigger.innerHTML;
    }
    //clipboard.js will take the entire inner content of the clicked cell.
});

// Re-implement the cosmetic highlighting of the cell content. This is actually done AFTER the content is copied to clipboard, but it gives a visual indication that something happened.
clipboard.on('success', function(e) {
    var range = document.createRange();
    
    range.selectNodeContents(e.trigger);
    window.getSelection().addRange(range);
});