JSFiddle - React, Tailwind, and code Playground

by deadlyicon

HTML

<div class="timeline"></div>

CSS

.timeline{
      /*background-color: orange;*/
    }

    .timeline .row{
      overflow: hidden;
      position: relative;
    }

    .timeline .row .cell{
      float: left;
      background: yellow;
      height: 50px;
      width: 50px;
      border: 1px solid black;
    }

    .timeline .cell.header{
      background-color: lightblue;
    }

    .timeline .row .timeblock{
      position: absolute;
      top: 5px;
      height: 30px;
      background: purple;
    }

    .timeline .row .timeblock .days1{
      width: 52px;
    }
    .timeline .row .timeblock .days2{
      width: 104px;
    }

JavaScript

var nom = 12;
    var nor = 4;
    $(document).ready(function(){
      var timeline = $('.timeline');
      var header = $('<div>').addClass('row header');

      var m = nom;
      while(m--){
        header.append($('<div>').addClass('cell header').text(m));
      }
      timeline.append(header);

      var i = nor;
      while (i--) {
        var row = $('<div class="row">');
        var m = nom;
        while(m--){
          row.append('<div class="cell">&nbsp;</div>');
        }
        timeline.append(row);
      };


      var timeblock = $('<div class="timeblock">');
      timeblock.css({width: '100px', left: '52px'});
      $('.timeline .row:not(.header)').first().append(timeblock);

    });