JSFiddle - React, Tailwind, and code Playground

by Nam CuPeo

HTML

<table class="bang">
<tbody>
<tr style="background: #e9ebee;">
<td style="text-align: center;"><b>Gói cước</b></td>
<td style="text-align: center;"><b>Đối tượng</b></td>
<td style="text-align: center;"><b>Cước phí <br/> (nội mạng - liên mạng)</b></td>
</tr>
<tr>
<td>MobiQ</td>
<td>Trả trước<br/>Gọi ít - nhắn tin nhiều</td>
<td>
Gọi : 1580 - 1780 đồng/phút<br/>
SMS : 200 - 250 đồng/SMS
</td>
</tr>
<tr>
<td>MobiCard</td>
<td>Trả trước<br/>Gọi nhiều - nhắn tin ít</td>
<td>
Gọi : 1180 - 1380 đồng/phút<br/>
SMS : 290 - 350 đồng/SMS
</td>
</tr>
<tr>
<td>MobiGold</td>
<td>Trả trước<br/>Gọi cực nhiều (hơn 135 phút/tháng) </td>
<td>
Gọi : 880 - 980 đồng/phút<br/>
SMS : 290 - 350 đồng/SMS
</td>
</tr>
<tr>
<td>MobiGold</td>
<td>Trả sau</td>
<td>
Gọi : 880 - 980 đồng/phút<br/>
SMS : 290 - 350 đồng/SMS
</td>
</tr>
</tbody></table>

CSS

.bang {border-collapse: collapse; background: rgb(255, 255, 255); font-family: Helvetica, Arial, sans-serif; font-size: 15px;  line-height:1.3em; overflow:auto; }
.bang tr {background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;}
.bang tr b {font-size: 15px;}
.bang td {background: transparent; border: 1px solid rgb(224, 224, 224); text-align: left; vertical-align: middle; color: #444444; font-size: 13px; padding: 10px 15px; }
.bang td:first-child {text-align: center;}