JSFiddle - React, Tailwind, and code Playground

by Jessie Lau

HTML

<table>
    <thead>
        <tr>
            <th colspan=6>HEADER</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan=3>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>
            <td rowspan=3;>Cell column</td>
        </tr>
          <tr>
            
            <td>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>

        </tr>
          <tr>
            
            <td>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>
           
        </tr>
    </tbody>
</table>

CSS

th {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
	color: #6D929B;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #C1DAD7;
	background: none;
}
th.spec {	
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #fff url(images/bullet1.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
}

th.specalt {
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #f5fafa url(images/bullet2.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
	color: #B4AA9D;
}
td {
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	background: #fff;
	padding: 6px 6px 6px 12px;
	color: #6D929B;
}


td.alt {
	background: #F5FAFA;
	color: #B4AA9D;
}