JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<div class="led red"></div>
<div class="box-name">un</div>
<div class="innerbox">some text</div>
<div class="content" data-box="1">box1</div>
<div class="content" data-box="2">box2</div>
<div class="content" data-box="3">box3</div>

CSS

.content, .led{transition:all 0.2s}
.led{
    width: 20px;
    height:10px;
}
.red{ background-color:red }
.green,
.content:hover
{ background-color:green }
.blue{ background-color:blue }
.content{
    height:30px;
    margin:50px;
    border:1px solid black;
    text-align:center;
    line-height:30px;
 }
.content:hover{
    border-radius:5px;
}

JavaScript

var led= {
	setColor: function (color){
        var elem=$('.led');
	   	$(elem).removeClass();
        $(elem).addClass('led');
       	$(elem).addClass(color);
    }
};

$('body').mouseover(function(eve){
    if ($(eve.target).hasClass('content') ) { 
    	led.setColor('green');
        var t=$(eve.target).text();
  	  	$('.innerbox').text(t);
  		$('.box-name').text( $(eve.target).attr('data-box') );
    }
    
    else{
        led.setColor('blue'); 
    	$('.box-name').text('unn');
    	$('.innerbox').text('unchecked');
    }
   
})
$('body').mouseleave(function(){
	 led.setColor('red');
})