JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div id="bar" style="height: 20px; width: 500px; background-color: #de6769"></div>

CSS

.element{
    height:20px;
    width:1px;
    display:inline-block;
}
.green{
   background-color: green;
}
.red{
    background-color: red;
}

JavaScript

var red_blocks = [5,6,7,8,9,10,100,101,102,103,104,105,400,401,402,403];
for( var i = 0; i < 500; i++){
    var block = $('#bar');
    if(red_blocks.indexOf(i) > 0){
        
        block.append('<div class="element red" title="' + i + '"></div>');
        
    }else{
        
        block.append('<div class="element green" title="' + i + '"></div>');
    
    }
    block.tooltip();
}

$(".element").mouseenter(function(e){
    console.log(e.target.title);
});