JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<table class="table table-bordered table-thin table-grey ">
    <thead>
        <tr>
            <th class="title" colspan="2"><span class="main">Title </span><span class="pull-right"><a href="#">button</a></span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="center">texttexttexttexttext 1</td>
            <td>texttexttexttext 2</td>
        </tr>
        <tr>
            <td class="center">abcabcabcabc</td>
            <td>cde</td>
        </tr>
    </tbody>
</table>

CSS

/*Tables*/
 .table-basic.table-bordered, .table-basic.table-bordered > thead > tr > th, .table-basic.table-bordered > tbody > tr > th, .table-basic.table-bordered > tfoot > tr > th, .table-basic.table-bordered > thead > tr > td, .table-basic.table-bordered > tbody > tr > td, .table-basic.table-bordered > tfoot > tr > td {
     border: 1px solid #89857e;
 }
 .table-basic > thead > tr > th {
     background-color: #e2960e;
     color: #fff;
 }
 .table-basic > tbody > tr > td {
     background-color: #f5f5f5;
 }
 .table-basic td, .table-basic th {
     text-align: center;
 }
 .table-basic.left td, .table-basic.left th {
     text-align: left;
 }
 .table-basic.table-striped > tbody > tr:nth-child(odd) > td, .table-basic.table-striped > tbody > tr:nth-child(odd) > th {
     background-color: #eaeaea;
 }
 .table-thin {
     font-size: 12px;
 }
 .table-thin2 {
     background: #CECECE;
     font-size: 15px;
 }
 .table.table-thin thead > tr > th, .table.table-thin tbody > tr > th, .table.table-thin tfoot > tr > th, .table.table-thin thead > tr > td, .table.table-thin tbody > tr > td, .table.table-thin tfoot > tr > td {
     padding: 3px;
 }
 .table .thin th, .table .thin td {
     padding-top: 2px;
     padding-bottom: 2px;
 }
 .table-grey > thead > tr > th {
     background-color: #514e49;
     color: #fff;
     border-bottom: 0;
     text-align: center;
 }
 .table-grey > tbody > tr > td {
     background-color: #eaeaea;
 }
 .table-grey.table-striped > tbody > tr:nth-child(odd) > td, .table-grey.table-striped > tbody > tr:nth-child(odd) > th {
     background-color: #f7f7f7;
 }
 .no-border {
     border: 0;
 }
 .table-white > tbody > tr > td {
     background: #fff;
     font-weight: 900;
     font-size: 12px;
     color: #5b5b5b;
 }
 .pull-right {
     float:right;
     background-color:#e2960e;
 }

.table.table-thin thead th.title {padding:0px}
.table.table-thin thead th.title span.main{ line-height:20px;  }
.table.table-thin thead th.title span {padding:3px;}