JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Table</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <div class="colors">
    <div class="blue">Blue</div>
    <div class="red">Red</div>
    <div class="pink">Pink</div>
  </div>
  <table>
    <tr>
        <th></th>
        <th>ПН, 27.05</th>
        <th>ВТ, 28.05</th>
        <th>СР, 29.05</th>
        <th>ЧТ, 30.05</th>
        <th>ПТ, 31.05</th>
        <th>СБ, 01.06</th>
        <th>ВС, 02.06</th>
     </tr>
    <tr>
        <th rowspan="2" class="hours">19:00</th>
        <td></td>
        <td rowspan="2" class="shp">Шпагат<br/>Юлия</td>
        <td></td>
        <td rowspan="2" class="shp">Шпагат<br/>Юлия</td>
        <td></td>
        <td></td>
        <td></td>
     </tr>
     <tr>
     	    <td class="mar">Хатха Йога<br/>Марина</td>
      	<td class="mar">Хатха Йога<br/>Марина</td>
      	<td class="mar">Хатха Йога<br/>Марина</td>
      	<td></td>
      	<td></td>
     </tr>
     <tr>
      	<th rowspan="2" class="hours">20:00</th>
      	<td></td>
        <td rowspan="2" class="strip">Стрип Пластика Юлия</td>
        <td></td>
        <td rowspan="2" class="strip">Стрип Пластика Юлия</td>
        <td></td>
        <td></td>
        <td></td>
     </tr>
     <tr>
     		<td class="nat">Functional Trainin<br/>Наталья</td>
      	<td class="nat">Functional Trainin<br/>Наталья</td>
      	<td class="nat">Functional Trainin<br/>Наталья</td>
      	<td ></td>
      	<td></td>
     </tr>
     <tr>
      	<th  rowspan="2" class="hours">21:00</th>
      	<td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
     </tr>
     <tr>
     		<td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
   ...

CSS

td.hours{
  height: 150px;
  width: 150px;
  text-align: right;
}
body{
  background: lightgray;
}
td{
  background: #fff;
}
td{
  border-radius: 5px;
  height: 50px;
  width: 100px;
  text-align: center;
  outline: none;
}
.mar{
  background: lightgreen;
}
.nat{
  background: green;
}
.shp{
  background: #95ffc8;
}
.strip{
  background: #ffe06e;
}
table{
  
}
.colors{
  font-size: 20px;
  position: absolute;
  top: 30px;
  left: 55%;
}

JavaScript

$('.colors').hide();

    $('td').on('click', function(){
      $('td').attr('contenteditable', true);
      $('.colors').show();
      $(this).addClass('current')

    });		
    $('div.blue').on('click', function(){
     $('.current').css({'backgroundColor':'blue'});
    })