JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
		
		<table class="features-table" style="margin:auto">
				<thead>
					<tr>
						<td></td>
						<td style="background-color:#000000;"><div class="box">
   <div class="ribbon"><span>FEATURED</span></div><p style=" color: white; font-size:30px; font-weight:100;"> Unlimited</p></div></td>
						<td style="background-color:#229BAA;"><p style=" color: white; font-size:30px; font-weight:100;">Premium</p></td>
						<td style="background-color:#FEFEFE;"><p style=" color: black; font-size:30px; font-weight:100;">Basic</p></td>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td></td>
						<td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed   " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
						<td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed   " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
						<td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed   " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
					</tr>
				</tfoot>
			
				<tbody>
					<tr>
						<td></td>
						<td id="price" style="background-color:#000000;">$5000</td>
						<td id="price" style="background-color:#2BC2D5;">$3000</td>
						<td id="price" style="background-color:#FEFEFE; color:black;">$1500</td>
					</tr>
					<tr id="one">
						<td>Number of Colleges Universities</td>
						<td>20</td>
						<td>10</td>
						<td>5</td>			
					</tr>
					<tr>
						<td>Number of Countries you can apply</td>
						<td>Unlimited</td>
						<td>2</td>
						<td>1</td>			
					</tr>
					<tr>
						<td>Money Back Guarantee</td>
						<td><i...

CSS

<style type="text/css">    
/*General styles*/



/*Features table------------------------------------------------------------*/

.features-table {
  font-family:'Open Sans';
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  text-shadow: 0 1px 0 #fff;
  color: #2a2a2a;
  background: #fafafa;  
  background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
  background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff)); 
}

#check {
color: #26CCA4;
font-size:20px;
}
#cross {
color: #E74A4A;
font-size: 20px;
}
.features-table td
{
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  text-align: center;
}

/*Body*/
.features-table tbody td
{
  text-align: center;
  
  
}

.features-table tbody td:first-child
{
  width: auto;
  text-align: left;
}

.features-table td:nth-child(2), .features-table td:nth-child(3), .features-table td:nth-child(4)
{
  background: #DADADA;
  background: #E3E3E3;
  border-right: 1px solid white;
}


.features-table tr:nth-child(even)
{
  background: #e7f3d4;  
  background: #E3E3E3;
}

/*Header*/
.features-table thead td
{
   font-family: 'Open Sans';
   font-size: 16;
   color: white;
   line-height:16px;
   font-weight:100;
   font-variant:small-caps;
   
  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px; 
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 1px solid #eaeaea; 
}

.features-table thead td:first-child
{
  border-top: none;
}

/*Footer*/
.features-table tfoot td
{
   
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px; 
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #dadada;
}

.features-table tfoot td:first-child
{
  border-bottom: none;
}
/*---------Price...