JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<table class="table table-condensed table-hover table-striped">
	<thead>
		<tr>
			<th></th>
			<th>AAAA</th>
			<th>AAAA</th>
			<th>AAAA</th>
			<th>AAAA</th>
			<th>AAAA</th>
			<th>AAAA</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="width: 55px;" class="text-center" style="padding-top: 5px; width: 25px;"><span class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"><i class='fa fa-check' style="font-size: 18px;"></i></span><span style='position: relative; top: -15px; right: 0px; left: 15px;'><span class='fa-stack fa-lg'><i class='fa fa-circle fa-stack-2x text-info' style='border-radius: 100%; border: 3px solid #5cb85c; line-height: 30px;'></i><span class='fa fa-stack-1x fa-inverse' style='top: 0px;'>6</span></span></span></td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
		</tr>
	</tbody>
</table>