JSFiddle - React, Tailwind, and code Playground

HTML

<div class="login">Login</div>
<br />
<div class="login">Login 2</div>

CSS

.login {
    background-color:#000000;
    color:#FFFFFF;
    width:60px;
    height:20px;
    padding:5px;
    border-radius:5px;
    text-align:center;
}

JavaScript

(function() {
    var elms = document.getElementsByClassName("login"),
        l = elms.length, i;
    for( i = 0; i < l; i++ ) {
        ( function( i ) {
            elms[i].onmouseover = function() {
                this.style.color = "#000000";
                this.style.background = "#FFFFFF";
            };
        })(i);
        
        ( function( i ) {
            elms[i].onmouseout = function() {
                this.style.color = "#FFFFFF";
                this.style.background = "#000000";
            }
        })(i);
    }
})();