JSFiddle - React, Tailwind, and code Playground

by Divine Chef

HTML

<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th>price /month</th>
            <th># loads /month</th>
            <th class="topbg">you save</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$50</td>
            <td>4</td>
            <td class="cbg">$2</td>
        </tr>
        <tr>
            <td>$90</td>
            <td>8</td>
            <td class="cbg">$2</td>
        </tr>
        <tr>
            <td>$120</td>
            <td>12</td>
            <td class="cbg">$12</td>
        </tr>
        <tr>
            <td>$160</td>
            <td>16</td>
            <td class="cbg">$12</td>
        </tr>
        <tr>
            <td>$190</td>
            <td>20</td>
            <td class="bottombg">$22</td>
        </tr>
    </tbody>
</table>

  
  </div>

CSS

.topbg {
	padding: 5px;
	background-color: #6699FF;
	width: 50px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.cbg {
padding: 5px;
	background-color: #6699FF;
}

.bottombg {
padding: 5px;
background-color: #6699FF;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
}