JSFiddle - React, Tailwind, and code Playground

by xnuxi

HTML

<html>
    <head>
<span style="background-color:red"><i>* 🖱️ on/off *</i></span>

        <script>
        document.addEventListener("DOMContentLoaded", function() {

var image = document.createElement('img');
image.src = 'https://images.squarespace-cdn.com/content/v1/5f531b8b940ba8746549da65/5f39ca73-0038-401d-ad06-e9109f9284a6/recording_2021_04_10_15_47_46_429.gif?format=750w';
document.body.appendChild(image);

image.style.width = '15%';

image.style.borderRadius = '50%';

image.style.position = 'absolute';
image.style.left = '50%';
image.style.top = '50%';
image.style.transform = 'translate(-50%, -50%)';

var image2 = document.createElement('img');
image2.src = 'https://images.squarespace-cdn.com/content/v1/5f531b8b940ba8746549da65/5f39ca73-0038-401d-ad06-e9109f9284a6/recording_2021_04_10_15_47_46_429.gif?format=750w';
image2.style.width = '20%';
image2.style.borderRadius = '50%';
image2.style.position = 'absolute';
image2.style.left = '50%';
image2.style.top = '50%';
image2.style.transform = 'translate(-50%, -50%)';
image2.style.backgroundColor = 'red';
document.body.appendChild(image2);

var image3 = document.createElement('img');
image3.src = 'https://images.squarespace-cdn.com/content/v1/5f531b8b940ba8746549da65/5f39ca73-0038-401d-ad06-e9109f9284a6/recording_2021_04_10_15_47_46_429.gif?format=750w';
image3.style.width = '20%';
image3.style.borderRadius = '50%';
image3.style.position = 'absolute';
image3.style.left = '50%';
image3.style.top = '50%';
image3.style.transform = 'translate(-50%, -50%)';
image3.style.backgroundColor = 'green';
document.body.appendChild(image3);

var image4 = document.createElement('img');
image4.src = 'https://images.squarespace-cdn.com/content/v1/5f531b8b940ba8746549da65/5f39ca73-0038-401d-ad06-e9109f9284a6/recording_2021_04_10_15_47_46_429.gif?format=750w';
image4.style.width = '20%';
image4.style.borderRadius = '50%';
image4.style.position = 'absolute';
image4.style.left = '50%';
image4.style.top =...