JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<div class="overview"></div>

CSS

.overview {
background-color: blue;
width: 250px;
margin: 0 auto;
}
.overviewbit {
    background-color: green;
    float:left;
    width:100px;
    height: 50px;
    margin: 10px;
}

JavaScript

var dataElements = 4;

for (var i = 0; i < dataElements; ++i){
    d=document.createElement('div');
    var myId = i;
    $(d).addClass('overviewbit')
    .appendTo('.overview')
    .click(function(){
          $(this).text(myId);
    });
}
$('.overviewbit').hover(function(){
    $('.overviewbit').not(this).css({opacity:'0.5'});
}).mouseout(function(){
    $('.overviewbit').not(this).css({opacity:'1'});
});