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 titulo" data-titulo="TESTESTE">
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td">
        <span data-name="prod3-1" class="" style="background-color: rgb(176, 197, 176); margin-left: -50%; "></span>
        <span data-name="prod3-1" class="" style="background-color: rgb(91, 183, 91); margin-left: 0%; "></span>
        
    </div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td">
         <span data-name="prod3-1" class="" style="background-color: rgb(91, 183, 91); "></span>
    </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

body, * {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}

/* 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: 0%;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 3px #444343;
    z-index: 1;
    letter-spacing: 9px;
    pointer-events: none;
    display: block;
}

@media print{
      .div-table.titulo:after{
        content: attr(data-titulo);
        width: 100%;
        position: absolute;
        height: 24px;
        text-align: center;
        left: 0%;
        font-size: 20px;
        line-height: 20px;
        text-transform: uppercase;
        color: #FFF;
        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;
    position: relative;
    overflow: hidden;
}

.div-table .tb-td span{
    width: 100% !important;
    height: 100% !important;
     position: absolute;
}

JavaScript

$(function(){
    $(".tb-td span").click(function(){
        $(this).remove();
    });
});