JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div id="tb">
    <table>
        <tr>
            <td class="checkbox"><input type="checkbox"/></td>
            <td class="title">TestBed1</td>
            <td class="subTitle">Gateways</td>
            <td class="subTitle">VMs</td>
        </tr>
        <tr>
            <td class="checkbox"><input type="checkbox"/></td>
            <td class="title">TestBed1</td>
            <td class="subTitle">Gateways</td>
            <td class="subTitle">VMs</td>
        </tr>

            <tr>
            <td class="checkbox"><input type="checkbox"/></td>
            <td class="title">TestBed1</td>
            <td class="subTitle">Gateways</td>
            <td class="subTitle">VMs</td>
        </tr>

            <tr>
            <td class="checkbox"><input type="checkbox"/></td>
            <td class="title">TestBed1</td>
            <td class="subTitle">Gateways</td>
                        <td class="subTitle">VMs</td>
        </tr>

            <tr>
            <td class="checkbox"><input type="checkbox"/></td>
            <td class="title">TestBed1</td>
            <td class="subTitle">Gateways</td>
            <td class="subTitle">VMs</td>
        </tr>

            <tr>
            <td class="checkbox"><input type="checkbox"/></td>
            <td class="title">TestBed1</td>
            <td class="subTitle">Gateways</td>
            <td class="subTitle">VMs</td>
        </tr>
</table>
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    font-family: Arial,Helvetica,sans-serif;   
}

#tb {
 width: 300px;   
    
}

#tb table {
 width: 100%;
 border: 1px solid black;    
}

#tb table tr {
    line-height: 30px;
    margin-bottom: 1px;
background-color: #F9F9F9;
border-top: 1px solid #C8C8C8;
}

#tb table tr:hover {
background-color: #FFF;

}

#tb table .title {
    width: 150px;
    color: black;
    font-weight: bold;
 border: 1px solid black;  
}

#tb table .subTitle {
    width: 60px;
    color: blue;
    font-size: 12px;
    border: 1px solid black;
    text-align: center;
    cursor: pointer;
}

#tb table .subTitle:hover {
background-color: #ABCDEF;

}

#tb table .checkbox {
    padding: 0px 5px;
}