JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<style contenteditable="true">
    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #ee00ee;
      margin: 1em;
    }
    h1 {
      font-size: 1.2em;
      margin: 0 0 .5em 0;
    }
    h2 {
      font-size: 1.1em;
      margin: 0 0 .5em 0;
    }
    button {
      margin: 2em 0;
      padding: 0;
      border: none;
    }
    script:not([src]) {
      display: block;
      white-space: pre;
      padding: 0 1em 1em 1em;
      color: #fff;
      background: #000;
      position: relative;
    }
    script:not([src])::before {
      content: "Source code (JavaScript):";
      background: orchid;
      width: auto;
      display: block;
      position: fixed;
      padding: 2px 5px;
      margin: -1em 0 0 -0.5em;
    }
    </style>
<h1>Shifting an image using HTML canvas</h1>
<h2>Simple page</h2>
<p>Click image to shift</p>

JavaScript

alert('display source')