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) */
}