JSFiddle - React, Tailwind, and code Playground

HTML

<div>
     <div class="div_blue" id="div_blue" 
    onmouseover="this.className='div_green'" 
    onmouseout="this.className='div_blue'" 
    ></div>
   </div>

<div>
     <div class="div_blue" id="div_blue" 
    onmouseover="this.className='div_green'" 
    onmouseout="this.className='div_blue'" 
    ></div>
   </div>

<div>
     <div class="div_blue" id="div_blue" 
    onmouseover="this.className='div_green'" 
    onmouseout="this.className='div_blue'" 
    ></div>
   </div>

CSS

.div_blue, .div_green, .div_red {
	width: 80px; height:40px; position:relative; left:10px; top:10px; background-color: #0000FF; margin-top:15px;
}
.div_green {background-color: #00CC00;}
.div_red {background-color: #FF0000;}

JavaScript

function ChangeDivColor(elem) {
    document.getElementById("div_blue").className = 'div_red' ;  
}
function RestoreColor(elem) {
    document.getElementById("div_blue").className = 'div_green' ;  
}

document.getElementById('div_blue').onmousedown = function(e){
    ChangeDivColor(this);
}
document.getElementById('div_blue').onmouseup = function(e){
    RestoreColor(this);
}