JSFiddle - React, Tailwind, and code Playground

by Csaba Hellinger

HTML

<button onclick="copyToClip(document.getElementById('foo').innerHTML)">
  Copy the stuff
  </button>

<div id=foo style="display:block">
  <span class="red">This</span> is some data that is not visible. 
  You can write some JS to generate this data. 
  It can contain rich stuff.  <b> test </b> me <i> also </i>
  <span style="font: 12px consolas; color: green;">Hello world</span> 
  You can use setData to put TWO COPIES into the same clipboard, 
  one that is plain and one that is rich. 
  That way your users can paste into either a
  <ul>
    <li>plain text editor</li>
    <li>or into a rich text editor</li>
  </ul>
</div>






<div stlye="font:sans-serif;"><h2>General</h2><ul style="list-style-type:none;"><li style="list-style-type:none; white-space:nowrap;"><b>Request URL:&nbsp;</b><pre style="display:inline-block; margin:0; padding:4px; background-color:#F4F4F4;">https://jsfiddle.usesfathom.com/tracker.js</pre></li><li style="list-style-type:none; white-space:nowrap;"><b>Request Method:&nbsp;</b><pre style="display:inline-block; margin:0; padding:4px; background-color:#F4F4F4;">GET</pre></li><li style="list-style-type:none; white-space:nowrap;"><b>Status Code:&nbsp;</b><pre style="display:inline-block; margin:0; padding:4px; background-color:#F4F4F4;">200</pre></li><li style="list-style-type:none; white-space:nowrap;"><b>Remote Address:&nbsp;</b><pre style="display:inline-block; margin:0; padding:4px; background-color:#F4F4F4;">13.32.28.28</pre></li></ul><h2>Request Headers</h2><ul style="list-style-type:none;"><li style="list-style-type:none; white-space:nowrap;"><b>Referer:&nbsp;</b><pre style="display:inline-block; margin:0; padding:4px; background-color:#F4F4F4;">https://jsfiddle.net/</pre></li><li style="list-style-type:none; white-space:nowrap;"><b>User-Agent:&nbsp;</b><pre style="display:inline-block; margin:0; padding:4px; background-color:#F4F4F4;">Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko)...

CSS

.red {
  color: red;
}

JavaScript

function copyToClip(str) {
  function listener(e) {
    e.clipboardData.setData("text/html", str);
    e.clipboardData.setData("text/plain", str);
    e.preventDefault();
  }
  document.addEventListener("copy", listener);
  document.execCommand("copy");
  document.removeEventListener("copy", listener);
};