JSFiddle - React, Tailwind, and code Playground

by Blake Dietz

HTML

<table>
    <tbody>
           <tr class = "row">
            <td class="col">
                <div class="swatch">
                </div>
                <div class="category">
                        Text                        
                </div>
               </td> 
                <td class="col">
                <div class="swatch">
                </div>
                <div class="category">
                        Text                        
                </div>
               </td> 
                <td class="col">
                <div class="swatch">
                </div>
                <div class="category">
                        Text                        
                </div>
               </td> 
        </tr>
        <tr class = "row">
            <td class="col">
                <div class="swatch">
                </div>
                <div class="category">
                        Text                        
                </div>
               </td> 
                <td class="col">
                <div class="swatch">
                </div>
                <div class="category">
                        Text                        
                </div>
               </td> 
                <td class="col">
                <div class="swatch">
                </div>
                <div class="category">
                        Text                        
                </div>
               </td> 
        </tr>
    </tbody>
</table>

CSS

.col div
{
    float:left;
}

.swatch
{
    background-color:red;
    width:14px;
    height:14px;
    margin: 0px 5px 0px 0px;
}

.color
{
    height:14px;
    width:14px;
}

.category
{
    line-height:14px;
}

td
{
    line-height:30px;
    font-size:10px;
}