JSFiddle - React, Tailwind, and code Playground

by yeuem1vannam

HTML

<table>
    <tr>
        <td id="j">Japanese</td>
        <td>10</td>
    </tr>
    <tr>
        <td id="v">Vietnamese</td>
        <td>180</td>
    </tr>
    <tr>
        <td id="c">Cambodian</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Education</td>
        <td>37</td>
    </tr>
    <tr>
        
        <td>Back Office</td>
        <td>15</td>
    </tr>
    <tr>
        <td>Total</td>
        <td>250</td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
td{
    text-align: center;
    min-width: 80px;
}

td#j,#v,#c{
    
    background-repeat: no-repeat;
    height: 155px;
    width: 380px;
    text-align: center;  
  background-position: center center;
  background-size: cover;
}
td#j{
    background-image: url("http://upload.wikimedia.org/wikipedia/en/9/9e/Flag_of_Japan.svg");
    
}

td#v{
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Vietnam.svg");
    
}
td#c{
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/8/83/Flag_of_Cambodia.svg");
    
}