JSFiddle - React, Tailwind, and code Playground
HTML
<center><h3>Pricing table</h3></center>
<center><p>
Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident...</p> </center>
<table>
<tr>
<td class="table-head">Basic</td>
<td class="table-head">Standart</td>
<td class="table-head">Premium</td>
<td class="table-head">Professional</td>
</tr>
<tr>
<td class="bg-blue">
<div id="circle" class="circle"><div class="price">$19</div>/mo</div>
</td>
<td class="bg-green">
<div id="circle" class="circle"><div class="price">$49</div>/mo</div>
</td>
<td class="bg-red">
<div id="circle" class="circle"><div class="price">$69</div>/mo</div>
</td>
<td class="bg-orange">
<div id="circle" class="circle"><div class="price">$99</div>/mo</div>
</td>
</tr>
<tr class="bg-white">
<td>1 website<hr/>1GB storage<hr/>bla-bla</td>
<td>3 website<hr/>5GB storage<hr/>bla-bla</td>
<td>10 website<hr/>20 GB storage<hr/>bla-bla</td>
<td>Unlim website<hr/>100GB storage<hr/>bla-bla</td>
</tr>
<tr>
<td class="bg-blue">Buy now</td>
<td class="bg-green">Buy now</td>
<td class="bg-red">Buy now</td>
<td class="bg-orange">Buy now</td>
</tr>
</table>
CSS
body{
background-color:#34495E;
color:#9DAFC0;
Font-family:arial;
}
table{
width:800px;
border-spacing:11px 0;
float:center;
}
td{
text-align:center;
}
h3{font-weight:normal;}
.table-head{
background-color:#283B4C;
color:#9DAFC0;
padding:10px;
width:800px;
text-align:center;
}
.bg-blue{background-color:#4797CC;color:#fff;}
.bg-green{background-color:#2E9F9D;color:#fff;}
.bg-red{background-color:#9C5D7A;color:#fff;}
.bg-orange{background-color:#F4B251;color:#fff;}
.bg-white{background-color:#fff;color:#999;}
#circle {
width: 80px;
height: 80px;
font-size:14px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border:3px solid #fff;
text-align:center;
}
.circle{margin:0 55px;}
.price{font-size:24px;padding-top:15px;}