JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
     <div class="div_blue" id="raz"></div>
     <div class="div_blue" id="dva"></div>
     <div class="div_blue" id="tri"></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; margin-left:35px
}
.div_green {background-color: #00CC00;}
.div_red {background-color: #FF0000;}

JavaScript

var divs = document.getElementById('container').getElementsByClassName('div_blue')
  for(var i=0; i<divs.length; i++) {
    var div = divs[i]
div.onmousemove = function() {this.className = 'div_green';};
div.onmousedown = function() {this.className = 'div_red'  ;};
div.onmouseup   = function() {this.className = 'div_green';};
div.onmouseout  = function() {this.className = 'div_blue' ;};
    
}