JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Curso Js Rockeseat</title>
</head>

<body>
    <div id="app">
        <button id="btn">Criar quadrado</button>
    </div>

    <script>
        btnElement = document.querySelector('button#btn');

        btnElement.onclick = function () {
            var quadradoElement = document.createElement('div');
            quadradoElement.setAttribute('class', 'box')
            quadradoElement.style.width = '100px';
            quadradoElement.style.height = '100px';
            quadradoElement.style.backgroundColor = '#060621';

            var divElement = document.querySelector('div#app');
            divElement.appendChild(quadradoElement);

            quadradoElement.onmouseover=newColor;
        }

        function getRandomColor() {
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        var newColor = getRandomColor(); // #E943F0

        var quadradoCriado=document.getElementsByClassName('box');
            quadradoCriado.onmouseover= function(){
                quadradoCriado.style.backgroundColor=newColor;
            }

        console.log(quadradoCriado);
    </script>
</body>
</html>