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

.led{
    width: 20px;
    height:10px;
}
.red{ background-color:red }
.green{ background-color:green }
.blue{ background-color:blue }
.content{
    height:30px;
    margin:50px;
    border:1px solid black;
 }

JavaScript

function led(){
	currentColor: 'red'; 
	function setColor(){
    	
    }
}

$('body').mouseover(function(){
  // oneClass($('.led'),'blue');    
})
$('body').mouseleave(function(){
	// oneClass($('.led'),'red');  
})
function oneClass(elem, one){
	$(elem).removeClass();
    $(elem).addClass(one);
    $(elem).addClass('led');
}
$('.content').mouseover(function(eve){
  $('.led').addClass('green');
  $('.led').removeClass('red');
  $('.innerbox').text('t');
  var t=$(eve.currentTarget).text();
  
  $('.innerbox').text(t);
  $('.box-name').text( $(eve.currentTarget).attr('data-box') );
 
});

$('.content').mouseleave(function(){
	$('.led').addClass('red');
  	$('.led').removeClass('green');
    $('.box-name').text('unn');
    $('.innerbox').text('unchecked');
});