JSFiddle - React, Tailwind, and code Playground

by kelu

HTML

<table cellpadding="0" cellspacing="0" class="content_listing">
    <tr>
        <td class="content_listing_ng" colspan="2"><strong>Search products</strong>
        </td>
    </tr>
    <tr>
        <td class="content_listing_l textr" style="width: 20%;"><strong>Search model:</strong>
        </td>
        <td class="content_listing_r" style="width: 80%;">
            <input type="text" name="model_search" style="width: 100%; padding: 5px"  autocomplete="off" />
        </td>
    </tr>
</table>

CSS

table.content_listing {
    width:100%;
    border-top:1px solid #C9C9C9;
    border-left:1px solid #C9C9C9
}

td.content_listing_ng {
    border-bottom: 1px solid #989898;
    border-right: 1px solid #C9C9C9;
    background: #EDEDED;
    background: -moz-linear-gradient(top, #EDEDED 0%, #C6C6C6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EDEDED), color-stop(100%, #C6C6C6));
    background: -webkit-linear-gradient(top, #EDEDED 0%, #C6C6C6 100%);
    background: -o-linear-gradient(top, #EDEDED 0%, #C6C6C6 100%);
    background: -ms-linear-gradient(top, #EDEDED 0%, #C6C6C6 100%);
    background: linear-gradient(top, #EDEDED 0%, #C6C6C6 100%);
    color: #000;
    padding: 4px 8px;
}

td.content_listing_l {
    border-bottom:1px solid #D9D9D9;
    border-right:1px solid #C9C9C9;
    width:30%;
    padding:4px 8px
}

td.content_listing_r {
    border-bottom:1px solid #D9D9D9;
    border-right:1px solid #C9C9C9;
    width:70%;
    padding:4px 8px
}