JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<table cellpadding="10" >

<tr>
<td><span >Some information</span</td>
<td>&lt;span class=&quot;&quot;&gt;Some information&lt;/span&gt;</td>
</tr>

<tr>
<td><span class="sb">Some information</span></td>
<td>&lt;span class=&quot;sb&quot;&gt;Some information&lt;/span&gt;</td>
</tr>

<tr>
<td><span class="sb sb-check">Some information</span></td>
<td>&lt;span class=&quot;sb sb-check&quot;&gt;Some information&lt;/span&gt;</td>
</tr>

<tr>
<td><span class="sb sb-check sb-red">Some information</span></td>
<td>&lt;span class=&quot;sb sb-check sb-red&quot;&gt;Some information&lt;/span&gt;</td>
</tr>


<tr>
<td><span class="sb sb-sun sb-green">Some information</span></td>
<td>&lt;span class=&quot;sb sb-sun sb-green&quot;&gt;Some information&lt;/span&gt;</td>
</tr>

<tr>
<td><span class="sb sb-sun sb-blue" style="font-size:20px">Some information</span></td>
<td>&lt;span class=&quot;sb sb-sun sb-blue&quot; style=&quot;font-size:20px&quot;&gt;Some information&lt;/span&gt;</td>
</tr>



</table>

CSS

.sb{
    border: 0.18em solid #aeaeae;
    /*border-radius: 0.3em;*/
    white-space: nowrap;
    padding: 0.3em 0.3em 0.3em 0.4em;
    background: -moz-linear-gradient(    left,  #aeaeae, #aeaeae 2em, transparent 2em, transparent 100% );
    background: -webkit-linear-gradient( left,  #aeaeae, #aeaeae 2em, transparent 2em, transparent 100% );
    background: -o-linear-gradient(      left,  #aeaeae, #aeaeae 2em, transparent 2em, transparent 100% );
    background: linear-gradient(     to right,  #aeaeae, #aeaeae 2em, transparent 2em, transparent 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aeaeae', endColorstr='#aeaeae',GradientType=1 );
    
}


.sb-check:before,.sb-sun:before{
    font: normal 1em fontAwesome;
    font-size:1em;
    padding: 0em 1.3em 0em 0em !important;
        

}

.sb:before{
    padding: 0em 2.0em 0em 0em; /*default padding assuming no icon*/
    content: "\00a0"; /*a non breaking space unicode*/
    text-align:center;
}


.sb-check:before{
    content: "\f00c" !important;  /*check icon unicode*/
        text-align:center;

}


.sb-sun:before{
    content: "\f185" !important;   /*sun icon unicode*/
        text-align:center;

}



.sb-red{
   border:  0.2em solid #f3a5a5 !important;
   background: -moz-linear-gradient(    left,  #f3a5a5, #f3a5a5 2em, transparent 2em, transparent 100% ) !important;
   background: -webkit-linear-gradient( left,  #f3a5a5, #f3a5a5 2em, transparent 2em, transparent 100% ) !important;
   background: -o-linear-gradient(      left,  #f3a5a5, #f3a5a5 2em, transparent 2em, transparent 100% ) !important;
   background: linear-gradient(     to right,  #f3a5a5, #f3a5a5 2em, transparent 2em, transparent 100% ) !important;
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3a5a5', endColorstr='#f3a5a5',GradientType=1 ) !important;
   
}

.sb-green{
   border:  0.2em solid #75de75 !important;
   background: -moz-linear-gradient(    left,  #75de75, #75de75 2em,...