JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<div class="div-table">
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
</div>
<div class="div-table" data-titulo="TESTESTE">
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    </div>

CSS

/* TABLE */
.div-table{
    display: table;
    width:990px;
    border-collapse: collapse;
    position: relative;
}

.div-table[data-titulo]::after{
content: attr(data-titulo);
width: 100%;
position: absolute;
height: 24px;
text-align: center;
left: 50%;
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
color: transparent;
text-shadow: 2px 2px #B1ABAB;
margin-left: -495px;
z-index: 1;
letter-spacing: 9px;
pointer-events: none;
display: block;
}

.div-table .tb-td{
   display: table-cell;
    width: 100px;
    border: 1px solid #aaa;
    text-align: center;
    height: 20px;
}