JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<BODY>
    
<div class='fishPBox'>
  <div class='fishTitle'>Имя1</div>
  <div class='fishTitleProh'>Имя2</div>
  
  <div class='fishTitleNavyk'>Имя3</div>
  <div class='break'></div>
  <div class='fish'>

  <TABLE class='grid'>
    <TR>
      <TD class='tcell'>Время</TD>
      <TD class='pPcell'>2</TD>
      <TD class='pPcell'>4</TD>
      <TD class='pPcell'>6</TD>
      <TD class='tPcell'>8</TD>
      <TD class='pPcell'>10</TD>
      <TD class='pPcell'>12</TD>
      <TD class='pPcell'>14</TD>
      <TD class='pPcell'>16</TD>
      <TD class='pPcell'>18</TD>
      <TD class='pPcell'>20</TD>
    </TR>
    <TR>
      <TD class='pLPcell'>Название</TD>
      <TD class='ocell'></TD>
      <TD class='ocell'></TD>
      <TD class='ocell'></TD>
      <TD class='pcell'>☼</TD>
      <TD class='ocell'></TD>
      <TD class='ocell'></TD>
      <TD class='pcell'>☼</TD>
      <TD class='pcell'>☼</TD>
      <TD class='ocell'></TD>
      <TD class='ocell'></TD>
    </TR>
      
  </TABLE>

  </div>
  </div>
</BODY>

CSS

body{
  background-color: #ddd;
  cursor: default;
}
 
table{
  margin-bottom: 10px;
}

.grid {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

div{
  border-radius: 10px;
}

td{
  padding: 0 5px 0 5px;
  text-align: center;
  white-space: nowrap;
  width: 50px;
  border: 1px solid black;
}

td:first-child {
  width: auto;
  border: 1px solid black;
}
    
div.fishPBox{
  background-color: #89b;
  display: inline-block;
  margin-bottom: 20px;
  padding: 15px;
  border: solid 1px #555;
}

div.fishTitle{
  color: #733;
  float:left;
  font-weight:bold;
  font-size:19px;
  margin: 0 0 5px 5px;
}

div.fishTitleNavyk{
  color: #257;
  float:right;
  font-weight:bold;
  font-size:18px;
  margin: 0 5px 5px 0;
}

div.fishTitleProh{
  color: blue;
  float:left;
  padding: 2px 0 0 15px;
}

div.break{
  clear:both;
} 

div.fish{
  background-color: #b98;
  margin-bottom: 15px;
  padding: 15px 15px 5px 15px;
  border: solid 1px #555;
}

td.tcell{
  background-color: #6ae;
  padding-top: 2px;
  font-size: 13px;
  font-weight:bold;
}

td.pPcell{
  width: 17px;
  font-weight:bold;
  background-color: #8a8;
  font-size: 14px;
  vertical-align: middle;
  padding: 3px;
}

td.tPcell{
  width: 17px;
  font-weight:bold;
  background-color: #fd8;
  font-size: 14px;
  vertical-align: middle;
  padding: 3px;
}

td.pcell{
  background-color: #bdb;
  font-size: 12px;
}

td.ocell{
  background-color: #dbb;
  font-size: 12px;
}

td.pLPcell{
  height: 100%;
  background-color: #8a8;
  font-weight:bold;
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  padding: 3px 10px 3px 5px;
}