JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper-outer">
    <div class="wrapper-inner"></div>
</div>

<table class="data">
    <tr>
        <td>1</td>   
        <td>a</td>
        <td>2</td>
        <td>6</td>
    </tr>
        <tr>
        <td>2</td>   
        <td>b</td>
        <td>5</td>
        <td>7</td>
    </tr>
    <tr>
        <td>3</td>   
        <td>c</td>
        <td>0</td>
        <td>1</td>
    </tr>
        <tr>
        <td>4</td>   
        <td>d</td>
        <td>2</td>
        <td>6</td>
    </tr>
        <tr>
        <td>5</td>   
        <td>e</td>
        <td>4</td>
        <td>9</td>
    </tr>
    </tr>
        <tr>
        <td>5</td>   
        <td>e</td>
        <td>1</td>
        <td>5</td>
    </tr>
    </tr>
        <tr>
        <td>5</td>   
        <td>e</td>
        <td>15</td>
        <td>25</td>
    </tr>
    </tr>
        <tr>
        <td>5</td>   
        <td>e</td>
        <td>7</td>
        <td>9</td>
    </tr>
    </tr>
        <tr>
        <td>5</td>   
        <td>e</td>
        <td>2</td>
        <td>5</td>
    </tr>
  <tr>
        <td>1</td>   
        <td>a</td>
        <td>2</td>
        <td>6</td>
    </tr>
        <tr>
        <td>2</td>   
        <td>b</td>
        <td>5</td>
        <td>7</td>
    </tr>
    <tr>
        <td>3</td>   
        <td>c</td>
        <td>0</td>
        <td>1</td>
    </tr>
        <tr>
        <td>4</td>   
        <td>d</td>
        <td>2</td>
        <td>6</td>
    </tr>
        <tr>
        <td>5</td>   
        <td>e</td>
        <td>4</td>
        <td>9</td>
    </tr>
    </tr>
        <tr>
        <td>5</td>   
        <td>e</td>
        <td>1</td>
        <td>5</td>
    </tr>
    </tr>
        <tr>
        <td>5</td>   
        <td>e</td>
        <td>15</td>
        <td>25</td>
    </tr>
    </tr>
        <tr>
        <td>5</td>   
        <td>e</td>
        <td>7</td>
        <td>9</td>
    </tr>
    </tr>
        <tr>
        <td>5</td>   
        <td>e</td>
        <td>2</td>
        <td>5</td>
    </tr>
...

CSS

.wrapper-outer{

}

.wrapper-inner{
    position: relative;
}

.data{
    display: none;
}

.row{
    position: relative;
    height: 40px;
}

.item{
    background: #eee;
    position: absolute;
    height: 30px;
    left: 0;
    width: 0;
    border: 1px solid #ccc;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.4);
    text-align: center;
    font: bold 16px/30px Helvetica, sans-serif;
}

JavaScript

var data = [],
    rows = [],
    chart = $('.wrapper-inner');


function DataItem(id, name, start, end){
     this.id = id;
     this.name = name;
     this.start = start;
     this.end = end;
}

$('.data tr').each(function() {
    var $this = $(this),
        item = new DataItem( $this.find('td:eq(0)').text(),
                             $this.find('td:eq(1)').text(),
                             $this.find('td:eq(2)').text(),
                             $this.find('td:eq(3)').text() );
        data.push(item);
});

function addRow(){
    var row = {
        el : $('<div class="row"></div>').appendTo(chart),
        positions: []
    }; 
    
    rows.push( row );
}

function checkRow(rowId, item){        
    var isRowAvailible = true;
    
    for (var i = 0; i < +item.end - +item.start; i++){
        if (rows[rowId].positions[+item.start + i]){
            isRowAvailible = false;
            break;
        }
    }
    
    return isRowAvailible;
}

function markRowPositions(rowId, item){

    
    for (var i = 0; i < item.end - item.start; i++){
        rows[rowId].positions[+item.start + i] = true;
    }
    
}

function addItems(){
    for (var i = 0; i < data.length; i++){
        (function(i){
            setTimeout(function() {addItem(data[i])}, 100 * i);
        })(i)
    }
}

function addItem(item){
    var rowToAdd = false,
        itemEl = $('<div class="item"></div>');
    
    for (var i = 0; i < rows.length; i++){
        if ( checkRow(i, item) ){
            rowToAdd = i;
            break;    
        }
    }
    
    if (rowToAdd === false){
        addRow();
        rowToAdd = rows.length - 1; 
    }
            
    rows[ rowToAdd ].el.append(itemEl);
            

            
    markRowPositions(rowToAdd, item);
            console.log(itemEl.css('opacity'))
            
    itemEl.css({
        'left': item.start * 30,
        'opacity' : .7,
        'width': ( ( item.end - item.start ) * 30 ) - 2,
        'background':...