JSFiddle - React, Tailwind, and code Playground

HTML

<div class="headerSection">
  </div>
  <div class="firstSection">
    <div class="mainTable">
      <table class="informationTableClass">
        <tr>
          <td class="informationTableLable">
            Offered Calls
          </td>
          <td class="informationTableValue">
            366
          </td>
        </tr>
        <tr>
          <td class="informationTableLable">
            Answered Calls
          </td>
          <td class="informationTableValue">
            246
          </td>
        </tr>
        <tr>
          <td class="informationTableLable">
            Agents On Break
          </td>
          <td class="informationTableValue">
            2
          </td>
        </tr>
        <tr>
          <td class="informationTableLable">
            Agents Idle
          </td>
          <td class="informationTableValue">
            1
          </td>
        </tr>
        <tr>
          <td class="informationTableLable">
            Abandoned Calls
          </td>
          <td class="informationTableValue">
            16
          </td>
        </tr>
        <tr>
        <td colspan="2" style="height:100%"></td></tr>
        <tr>
          <td colspan="2">
            <div class="slNewClass">
              <div class="details">
                <span class="content">Service Level</span>
                <span class="value" id="slSpan" runat="server">0%</span>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="vmp_charts">
    </div>
  </div>

CSS

html, body {
      margin: 0px;
      padding: 0px;
      height: 100%;
      width: 100%;
      background-color: red;
    }

    .headerSection {
      width: 100%;
      height: 10%;
      background-color: green;
    }

    .firstSection {
      width: 100%;
      height: 70%;
      background-color: blue;
    }

    .secondSection {
      width: 100%;
      height: 20%;
      background-color: yellow;
    }

    .mainTable {
      width: 20%;
      float: left;
      height: 100%;
      background-color: purple;
    }

    .vmp_charts {
      float: right;
      width: 80%;
      height: 100%;
      background-color: white;
    }

    .informationTableClass {
      height: 100%;
      width: 100%;
    }
      .informationTableClass tr td {
        height: 25px;
      }
      
       .informationTableClass tr {
        border-bottom: 1px solid #4A4A4A;
      }

    .informationTableLable {
      vertical-align: middle;
      font-family: Britannic;
      font-weight: bold;
      text-align: center;
      color: #fff;
      background-color: #444;
      font-weight: 700;
      font-size: 10px;
      border: 1px solid #3a3a3a;
    }

    .informationTableValue {
      vertical-align: middle;
      text-align: center;
      font-family: Calibri;
      color: #444;
      font-weight: bold;
      width: 58px;
      font-weight: 600;
      font-size: 10px;
      border: 1px solid #3a3a3a;
    }

    .slNewClass {
      width: 90%;
      background-color: #e5412d;
      float: left;
      border-top-right-radius: 4px;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }

      .slNewClass .details {
        position: relative;
        margin-left: 15px;
        z-index: 11;
        float: left;
        margin-top: 15px;
        text-align: left;
      }

      .slNewClass .content {
        display: block;
        font-size: 10px;
        font-weight: bold;
        font-weight: 600;
        color:...