JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div class="table-Container">
	<div id="fan-free-container">
		FAN-FREE AND ENERGY EFFICIENT<br>
		<div id="seriesContainer"><div id="tx4200Container"><div class="txHeader">
				TX4200E</div></div><div id="ks6700Container"><div class="ksHeader">
				KS6700</div></div><div id="ks7200Container"><div class="ksHeader">
				KS7200</div></div><div id="ks7500Container"><div class="ksHeader">
KS7500</div></div><div id="ks7700Container"><div class="ksHeader">
				KS7700</div></div>
		</div>
	</div>
</div>

CSS

#fan-free-container {
	background: rgb(230,231,233);
	-moz-border-radius:10px 10px 0px 0px;
	-webkit-border-radius:10px 10px 0px 0px;
	border-radius:10px 10px 0px 0px;
	text-align: center;
	border-style: solid;
	border-color: #c4c5c6;
	border-width: 2px;
}

#seriesContainer > div{
    display: inline-block;
}

#seriesContainer div > div{
	padding: 4px 25px;
	color: white;
	font-weight: bold;
	border-style: solid;
	border-color: #c4c5c6;
	border-width: 2px;
}

.txHeader {
	background: -webkit-linear-gradient(#af9358, #ded1b9); /* For Safari */
	background: -o-linear-gradient(#af9358, #ded1b9); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#af9358, #ded1b9); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#af9358, #ded1b9); /* Standard syntax (must be last) */
}

.ksHeader {
	background: -webkit-linear-gradient(#06426b, #93a7c2); /* For Safari */
	background: -o-linear-gradient(#06426b, #93a7c2); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#06426b, #93a7c2); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#06426b, #93a7c2); /* Standard syntax (must be last) */
}