JSFiddle - React, Tailwind, and code Playground

by Dwza

HTML

<div class="container">
  <p>
    irgendwas
  </p>
  <p class="clipable">
    ich bin cliptext
  </p>
  <p>
    <span>aaaa</span>
    <span class="clipable">aaaa</span>
  </p>
</div>

CSS

.clipImageContainer {
  position: absolute;
  margin-right: 10px;
  width: 15px;
  top: 0;
  left: 0;
}
.clip_active {
  fill: #009900;
}
.clipable {
  color: blue;
  font-weight: bold;
  position: relative;
  padding-left:20px;
}
.clipImageContainer:has() {
  color: yellow;
}

JavaScript

var dom_clips = document.querySelectorAll('.clipable');
function clip(e) {
  var input = document.createElement('input');
  input.value = e.textContent.trim();
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
}
function setColor(i, bool) {
  var aClass = "clip_active";
  var e = document.getElementById("clip_id_" + i);
  if (typeof bool !== 'undefined') {
    e.classList.add(aClass);
  } else {
    e.classList.remove(aClass);
  }
}
function createClipImage(e, i) {
  var svg_string = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"><g id="_x38__25_"><g><path id="clip_id_' + i + '" fill="#000" d="M714.4,591.9H285.6c-16.9,0-30.6,13.7-30.6,30.6c0,16.9,13.7,30.6,30.6,30.6h428.7c16.9,0,30.6-13.7,30.6-30.6C745,605.6,731.3,591.9,714.4,591.9z M714.4,745H285.6c-16.9,0-30.6,13.7-30.6,30.6c0,16.9,13.7,30.6,30.6,30.6h428.7c16.9,0,30.6-13.7,30.6-30.6C745,758.7,731.3,745,714.4,745z M806.2,132.5h-91.9V71.3h-82.5C605.3,34.8,556.5,10,500,10c-56.5,0-105.3,24.8-131.9,61.3h-82.5v61.2h-91.9c-67.7,0-122.5,54.9-122.5,122.5v612.5c0,67.7,54.8,122.5,122.5,122.5h612.5c67.7,0,122.5-54.8,122.5-122.5V255C928.8,187.4,873.9,132.5,806.2,132.5z M346.9,132.5h68c0-33.8,38.1-61.3,85.1-61.3c47,0,85.1,27.4,85.1,61.3h68.1V255H346.9V132.5z M867.5,867.5c0,33.8-27.4,61.3-61.3,61.3H193.7c-33.8,0-61.3-27.4-61.3-61.3V255c0-33.8,27.4-61.3,61.3-61.3h91.9v122.5h428.7V193.8h91.9c33.8,0,61.3,27.4,61.3,61.3V867.5z M714.4,438.8H285.6c-16.9,0-30.6,13.7-30.6,30.6s13.7,30.6,30.6,30.6h428.7c16.9,0,30.6-13.7,30.6-30.6S731.3,438.8,714.4,438.8z"/></g></g></svg>';
  var nbsp = document.createTextNode("\u00A0");
  var div = document.createElement('div');
  div.className = "clipImageContainer";
  div.innerHTML = svg_string;
  div.addEventListener("click", function() {
    // copy to clipboard
    clip(e);
   ...