JSFiddle - React, Tailwind, and code Playground

HTML

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

var inboundcycle = document.createElement('div');
inboundcycle.innerHTML = 'inboundcycle';
inboundcycle.style.position = 'absolute';
inboundcycle.style.top = '0px';
inboundcycle.style.left = '0px';
inboundcycle.style.backgroundColor = '#ff0000';
inboundcycle.style.color = '#ffffff';
inboundcycle.style.fontSize = '20px';
inboundcycle.style.padding = '10px';
inboundcycle.style.zIndex = '9999';
inboundcycle.style.fontFamily = 'sans-serif';
document.body.appendChild(inboundcycle);

var x = 0;
var y = 0;
var step = 1;
var delay = 30;
var height = 0;
var width = 0;
var bounce = 'right';

function f() {
  height = document.body.clientHeight;
  width = document.body.clientWidth;
  if (bounce == 'right') {
    x += step;
  } else {
    x -= step;
  }
  if (x > width) {
    bounce = 'left';
    x = width;
  }
  if (x < 0) {
    bounce = 'right';
    x = 0;
  }
  inboundcycle.style.top = y + 'px';
  inboundcycle.style.left = x + 'px';
  setTimeout(f, delay);
}
f();
});
        </script>
    </head>
    <body style="margin: 0;">
        <div style="background-color: black; position: fixed; bottom: 0; width: 100%; height: 20px; padding: 20px; opacity: .85; z-index: 1000;">
            <svg id="Layer_1" data-name="Layer 1" height="40px" width="40px" style="top: -8px;
            position: relative;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><defs><style>.cls-1{fill:#fff;}</style></defs><title>openai-symbol-flat-white</title><path class="cls-1"...