JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>Game Title</title>
</head>
<body style="margin: 0pt; background-color: rgb(0, 0, 0);">
<div id="gamescreen" style="width: 400px; height: 240px; overflow: hidden; -moz-transform-origin: left top; position: absolute; -moz-transform: scale(1.4);">
    <div style="position: absolute; width: 16px; height: 16px; left: 0px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 16px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 32px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 48px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 64px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 80px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 96px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 112px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 128px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 144px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 160px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 176px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 192px; bottom: 0px; background-color: red;);"></div>
    <div style="position: absolute; width: 16px; height: 16px; left: 208px; bottom: 0px; background-color: red;);"></div>
    <div...