JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<table cellpadding="0" cellspacing="0">
  <th>Sunday</th>
  <th>Monday</th>
  <th>Tuesday</th>
  <th>Wednesday</th>
  <th>Thursday</th>
  <th>Friday</th>
  <th>Saturday</th>
<tbody>
  <tr>
    <td>
      <div>1</div>
      <div>
        <span class="leftContent">Pending</span>
        <span class="rightContent">11</span>
      </div>
      <div>
        <span class="leftContent">Approved</span>
        <span class="rightContent">11</span>
      </div>
      <div>
        <span class="leftContent">Denied</span>
        <span class="rightContent">11</span>
      </div>
    </td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
    <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
</tbody>
</table>

CSS

.calendarTable{
 
}
table, th, td {
  border: 1px solid #868686;
  border-collapse: collapse;
  font-style: normal;
  font-weight: 400;
}
th, td {
  width: 144px;
  height: 29px;
  padding: 5px;
}

td {
  width: 144px;
  height: 99px;
  vertical-align:top;
}

.leftContent{
  display: inline-block;
  width: 52%;
  border: 1px solid blue;
}

.rightContent{
  display: inline-block;
  text-align:right;
  width:40%;
  border: 1px solid red;
}

th{
  width: 110px;
  height: 25px;
}

body{
  font-size: 12px;
  font-family: Arial,Helvetica,sans-serif;
  color: #868686;
}