JSFiddle - React, Tailwind, and code Playground

HTML

<div id="firstOne"></div>
<div class="secondOne"></div>
<div class="secondOne"></div>

CSS

#firstOne{
    height:240px;
    width:240px;
    border:5px solid blue;
    background-color: orange;
    display:inline-block;
}

.secondOne{
    height:240px;
    width:240px;
    border:5px solid green;
    background-color: skyblue;
    display: inline-block;
}

JavaScript

document.addEventListener("DOMContentLoaded",function(){
    var firstElement = document.getElementById('firstOne');
    firstOne.addEventListener('mouseout',function(){
        this.style.backgroundColor = 'red';
        this.style.border = '5px outset #00FF1E';
    });

    var secondElements = document.getElementsByClassName('secondOne');
    
    for (var i=0;i<secondElements.length; i++) {
       secondElements[i].addEventListener('click',function(){
        for(var i = 0; i < secondElements.length ; i++){
            secondElements[i].style.backgroundColor = 'red';
        }
    });
}

});