JSFiddle - React, Tailwind, and code Playground

by Dörnesz Tamás

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Async Clipboard API Image Demo</title>
</head>
<body>
  <h1>Async Clipboard API Image Demo</h1>

  <section>
    <button id="copy"><strong>Copy Chrome Logo</strong><br><em>(write to clipboard)</em></button>
    <button id="paste"><strong>Paste Image on Clipboard</strong><br><em>(read from clipboard)</em></button>
  </section>

  <h3>Permissions:</h3>

  <section id="permbuttons"></section>

  <h3>Image on clipboard:</h3>
  <image id="image-field" width="42" height="42"></image>

  <h3>Example 'image/png' images to copy:</h3>
  <div>
    <image src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_Chrome_Material_Icon-450x450.png" width="42" height="42"></image>
    <image src="https://upload.wikimedia.org/wikipedia/commons/f/f3/Chromium_Material_Icon.png" width="42" height="42"></image>  
  </div>

  <div id="toast" hidden></div>
  <script src="https://async-clipboard-api.glitch.me/index.js"></script>
</body>
</html>