JSFiddle - React, Tailwind, and code Playground

HTML

<div class="MenuBox">
</div>
<div class="MenuBox">
</div>
<div class="MenuBox">
</div>

CSS

.MenuBox {
    transition: all 1.0s ease;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    border: solid 10px #000;
    background-color: rgba(255,255,255,0.5);
    width:auto;
    height:auto;
    margin-left: auto ;
    margin-right: auto ;
    padding:10px;
    display: inline-block;
}

JavaScript

var menuBoxes = document.getElementsByClassName('MenuBox');
for (var i = 0; i < menuBoxes.length; i++) {
    menuBoxes[i].onmouseover = function(e) {
        var color = '#'+Math.floor(Math.random()*16777215).toString(16);
        var colorString = '0px 0px 30px 0px ' + color;
        this.style['box-shadow'] = colorString;
        this.style['-webkit-box-shadow'] = colorString;
        this.style['-moz-box-shadow'] = colorString;
    }  
    menuBoxes[i].onmouseout = function(e) {
        this.style['box-shadow'] = "none";
        this.style['-webkit-box-shadow'] = "none";
        this.style['-moz-box-shadow'] = "none";
    }
}