JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class="divt">
<div class="divtb">
<div class="divtr">
<div class="divth">&nbsp;</div>
<div class="divth">Light</div>
<div class="divth">Muted</div>
<div class="divth">Bright</div>
<div class="divth">Intense</div>
</div>
<div class="divtr">
<div class="divth">Silver</div>
<div class="divtc" style=''>
<div class="hornname">Silver Light</div>
</div>
<div class="divtc">
<div class="hornname">Silver Muted</div>
</div>
<div class="divtc">
<div class="hornname">Silver Bright</div>
</div>
<div class="divtc">
<div class="hornname">Silver Intense</div>
</div>
</div>
<div class="divtr">
<div class="divth">Gold</div>
<div class="divtc">
<div class="hornname">Gold Light</div>
</div>
<div class="divtc">
<div class="hornname">Gold Muted</div>
</div>
<div class="divtc">
<div class="hornname">Gold Bright</div>
</div>
<div class="divtc">
<div class="hornname">Gold Intense</div>
</div>
</div>
<div class="divtr">
<div class="divth">Copper</div>
<div class="divtc">
<div class="hornname">Copper Light</div>
</div>
<div class="divtc">
<div class="hornname">Copper Muted</div>
</div>
<div class="divtc">
<div class="hornname">Copper Bright</div>
</div>
<div class="divtc">
<div class="hornname">Copper Intense</div>
</div>
</div>
<div class="divtr">
<div class="divth">Onyx</div>
<div class="divtc">
<div class="hornname">Onyx Light</div>
</div>
<div class="divtc">
<div class="hornname">Onyx Muted</div>
</div>
<div class="divtc">
<div class="hornname">Onyx Bright</div>
</div>
<div class="divtc">
<div class="hornname">Onyx Intense</div>
</div>
</div>
</div>
</div>

CSS

.divt{
	display: table;
	width: 100%;
}
.divtr {
	display: table-row;
}

.divtc, .divth {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}


.divtb {
	display: table-row-group;
}