JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<br>
<br>

<div align='left' id='timeline'></div>
<br>
<br>
<br>


<div align='center' style='width: 80%'>
  <div class='container'>
    <div class='transition cell' status='1'>
      <div class="cell-hint">hint</div>
    </div>
  </div>
</div>

CSS

/*
CSS GRID help:
https://tuhub.ru/posts/css-grid-complete-guide
*/

:root {
  /*переменные */
  --clr_border: rgba(255, 255, 255, 1);
  --clr_unselect_bg: rgba(150, 150, 150, 0.5);
  --clr_select_bg: red;
  --clr_hover_bg: rgba(255, 0, 0, 0.5);
  /*
var(--clr_border);
var(--clr_unselect_bg);
var(--clr_select_bg);
var(--clr_hover_bg);
	получить значение
	var(--color-blue);
	*/
}

.container {
  display: grid;
  /*css grid*/
  grid-column-gap: 2px;
  /*расстояние между ячейками*/
  width: 100%;
  height: 20px;
}

/*кнопка*/

.container .month {
  position: relative;
  text-align: center;
  grid-row-start: 1;
  /*начальная строка*/
  grid-row-end: 1;
  /*конечная строка */
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100px;
  background: var(--clr_unselect_bg);
}

.container .year {
  position: relative;
  text-align: center;
  grid-row-start: 1;
  /*начальная строка*/
  grid-row-end: 1;
  /*конечная строка */
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100%;
  background: var(--clr_unselect_bg);
}

.container .tl_btn {
  cursor: pointer;
  position: relative;
  text-align: center;
  grid-row-start: 1;
  /*начальная строка*/
  grid-row-end: 1;
  /*конечная строка */
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100%;
  background: var(--clr_unselect_bg);
}

/*наведение на кнопку*/

.container .tl_btn:hover {
  cursor: pointer;
  position: relative;
  text-align: center;
  grid-row-start: 1;
  grid-row-end: 1;
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100%;
  background: var(--clr_hover_bg);
}

/*ячейка*/

.container .cell {
  cursor: pointer;
  position: relative;
  grid-row-start: 1;
  grid-row-end: 1;
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100%;
}

/*наведение на ячейку*/

.container .cell:hover {
  grid-row-start: 1;
  grid-row-end: 1;
  border: solid 2px var(--clr_border);
  height: 20px;
  width: 100%;
  background:...

JavaScript

var timeLine = (function() {
  var month = [
    'Январь',
    'Февраль',
    'Март',
    'Апрель',
    'Май',
    'Июнь',
    'Июль',
    'Август',
    'Сентябрь',
    'Октябрь',
    'Ноябрь',
    'Декабрь'
  ]

  //private
  function getRandomInt(min, max) {
    // генератор рандомного числа
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function resetSelection(event) {
    //сбрасываем выделение
    for (let ch = 0; ch < event.target.parentElement.childElementCount; ch++) {
      if (event.target.parentElement.children[ch].getAttribute('select') === "true") {
        event.target.parentElement.children[ch].setAttribute('select', false);
      }
    }
  }

  function selectElement(event) {
    //выделяем элемент
    if (event.target.getAttribute('class') === 'cell') {
      resetSelection(event)
      event.target.setAttribute('select', true);
    }
  }
  //public
  return {
    elementClick: function(event) {
      //клик по элкменту
      selectElement(event);
    },
    nextClick: function(event) {
      //клик по элкменту
      let timelineID = event.target.parentElement.parentElement.getAttribute('id')
      let y = event.target.parentElement.children[0].getAttribute('y')
      let m = event.target.parentElement.children[0].getAttribute('m')
      let c = event.target.parentElement.children[0].getAttribute('c')
      m = parseInt(m, 10) + 1;
      timeLine.initMonthly(new Date(y, m), timelineID, c)
      //alert("nextClick")
    },
    backClick: function(event) {
      //клик по элкменту
      let timelineID = event.target.parentElement.parentElement.getAttribute('id')
      let y = event.target.parentElement.children[0].getAttribute('y')
      let m = event.target.parentElement.children[0].getAttribute('m')
      let c = event.target.parentElement.children[0].getAttribute('c')
      m = parseInt(m, 10) - 1;
      timeLine.initMonthly(new Date(y, m), timelineID, c)
      //alert("backClick")
    },

    initMonthly:...