JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]>>!--> <html lang="ru"> <!--<![endif]-->
<head>
  <link rel="stylesheet" href="calengar.css">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Календарь событий</title>
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <div class="container">
    <table class="cal">
      <caption>
        <span class="prev"><a href="#">←</a></span>
        <span class="next"><a href="#">→</a></span>
        Апрель 2019
      </caption>
      <thead>
        <tr>
          <th>Пн</th>
          <th>Вт</th>
          <th>Ср</th>
          <th>Чт</th>
          <th>Пт</th>
          <th>Сб</th>
          <th>Вс</th>
        </tr>
      </thead>
      <tbody>
        <tr>
      <td class="off"><a href="#">25</a></td>
          <td class="off"><a href="#">26</a></td>
          <td class="off"><a href="#">27</a></td>
          <td class="off"><a href="#">28</a></td>
          <td class="off"><a href="#">29</a></td>
          <td class="off"><a href="#">30</a></td>
          <td class="off"><a href="#">31</a></td>
        </tr>
        <tr>
          <td><a href="#">1</a></td>
          <td><a href="#">2</a></td>
          <td><a href="#">3</a></td>
          <td><a href="#">4</a></td>
          <td><a href="#">5</a></td>
          <td><a href="#">6</a></td>
          <td><a href="#">7</a></td>
    </tr>
        <tr>
          <td><a href="#">8</a></td>
          <td><a href="#">9</a></td>
          <td><a href="#">10</a></td>
          <td><a href="#">11</a></td>
          <td><a href="#">12</a></td>
          <td><a href="#">13</a></td>
          <td><a href="#">14</a></td>
        </tr>
        <tr>
          <td><a...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  font: 30px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; 		/*задает задает размер шрифта с названием месяца*/
  color: #404040;
  background: #46484C;
}

.container {
  margin: 50px auto;
  width: 706px;				/*задает ширину таблицы */
}

.container .cal {
  margin: 0 auto;
}

.cal {
  display: block;
  width: 706px;				/*задает ширину ячейки с названием месяца(и фона)*/
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.cal a {
  text-decoration: none;
}

.cal caption {
  display: block;
  line-height: 100px;			/*задает высоту ячейки с названием месяца*/
  font-weight: bold;
  color: #e2e2e2;
  text-align: center;
  text-shadow: 0 -1px black;
  background: #333;
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid #333;
  border-bottom: 1px solid #313131;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.cal caption a {
  display: block;
  line-height: 80px;		/*задает высоту ячейки с стрелками перелистывания месяцев */
  padding: 0 10px;			/*задает отступ перед и после стрелки перелистывания месяцев...