JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <p id="demo"></p>
  <input type="text" id="dateInput" name="dateInput">
  <button>▼</button>
  <div id="calender" style="display: block;">
    <div class="button-bar">
      <button>《</button>
      <button>&lt;</button>
      <p id="semiScreen">
        <button>Aug,</button>
        <button>2017</button>
      </p>
      <button>&gt;</button>
      <button>》</button>
    </div>
    <table id="calTable">
      <tr>
        <th>S</th>
        <th>M</th>
        <th>T</th>
        <th>W</th>
        <th>T</th>
        <th>F</th>
        <th>S</th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
      <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
      </tr>
      <tr>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
      </tr>
      <tr>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
        <td>31</td>
      </tr>
    </table>
  </div>

</body>

CSS

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: white;
}

table,
th,
td {
  border: 1px solid #f2f2f2;
  font-size: 20px;
}

table {
  border-collapse: collapse;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

td {
  padding: 4px 10px;
  text-align: center;
}

td:hover {
  color: white;
  background-color: #888;
}

body {
  font-family: Arial;
}

#calender {
  position: relative;
  z-index: 1;
  display: none;
}

#calender table {
  width: 287px;
}

div.button-bar {
  height: 50px;
  line-height: 100%;
  width: 287px;
}

#semiScreen {
  display: inline-block;
  width: 127px;
  margin: 0px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
}

#calender div.button-bar button {
  background: white;
  height: 100%;
  border: none;
  margin: 0px;
  width: 35px;
  outline: none;
}

#calender div.button-bar button:hover {
  color: white;
  background-color: #888;
}

#calender div.button-bar #semiScreen button {
  width: auto;
}