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>
            </table>
            <div>
                <div class="slNewClass">
                     <div class="details">
                         <span class="content">Service Level</span>
                         <span class="value" id="slSpan" runat="server">0%</span>
                     </div>
                 </div>
            </div>
        </div>
        <div class="vmp_charts">

        </div>
    </div>
    <div class="secondSection">

    </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:60%;
    width:100%;
}

.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:20px;
    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:20px;
    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: 20px;
font-weight:bold;
font-weight: 600;
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
}
.slNewClass .value {
display: block;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
font: 13px/1.7em "Open Sans", "trebuchet ms", arial, sans-serif;
font-size: 32px;
font-weight: 600;
color:white;
}