JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<table class="table table-condensed">
    <tr>
  <th>Heading 1</th>
  <th>Heading 2</th> 
  <th>Heading 3</th>
<th>Heading 4</th>
  <th>Heading 5</th> 
  <th>Heading 6</th>
<th>Heading 7</th>
  <th>Heading 8</th> 
  <th>Heading 9</th>
  <th>Heading 10</th>        
</tr>
<tr class="active">
     <td class="active">sno</td>
  <td class="success">name</td>
  <td class="warning">.fd..</td>
  <td class="danger">..dfd.</td>
  <td class="info">.dfd..</td>
         <td class="active">.fdfd..</td>
  <td class="success">...dfd</td>
  <td class="warning">.fd..</td>
  <td class="danger">..dfd.</td>
  <td class="info">.dfd..</td>
</tr>

<tr class="active">
     <td class="active">1</td>
  <td class="success">john</td>
  <td class="warning">carry</td>
  <td class="danger">..dfd.</td>
  <td class="info">.dfd..</td>
         <td class="active">.fdfd..</td>
  <td class="success">...dfd</td>
  <td class="warning">.fd..</td>
  <td class="danger">..dfd.</td>
  <td class="info">.dfd..</td>
</tr>
    
</table>