JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<div class="pdfpreview-row cols-same-width"><div class="pdfpreview-col hoverable clickable" disabled="false"> <div class="disable-checkbox-wrapper"> <label for="disable-checkbox-0" style="width: 100%;height: 100%;top: 0;left: 0;position: absolute; margin: 0;" title="Clique para desabilitar esta célula"> </label> <input id="disable-checkbox-0" type="checkbox" checked="true" class="custom-checkbox" style="display: none;"> </div> Célula4 Não informado</div><div class="pdfpreview-col hoverable clickable" disabled="false"> <div class="disable-checkbox-wrapper"> <label for="disable-checkbox-1" style="width: 100%;height: 100%;top: 0;left: 0;position: absolute; margin: 0;" title="Clique para desabilitar esta célula"> </label> <input id="disable-checkbox-1" type="checkbox" checked="true" class="custom-checkbox" style="display: none;"> </div> Célula4 Não informado</div><div class="pdfpreview-col hoverable clickable" disabled="false"> <div class="disable-checkbox-wrapper"> <label for="disable-checkbox-2" style="width: 100%;height: 100%;top: 0;left: 0;position: absolute; margin: 0;" title="Clique para desabilitar esta célula"> </label> <input id="disable-checkbox-2" type="checkbox" checked="true" class="custom-checkbox" style="display: none;"> </div> Célula4 Não informado</div></div><div class="pdfpreview-row border-bottom-0 text-center"> <div class="pdfpreview-col hoverable clickable" disabled="false"> <div class="disable-checkbox-wrapper"> <label for="disable-checkbox-3" style="width: 100%;height: 100%;top: 0;left: 0;position: absolute; margin: 0;" title="Clique para desabilitar esta célula"> </label> <input id="disable-checkbox-3" type="checkbox" checked="true" class="custom-checkbox" style="display: none;"> </div> <h4>Imagens</h4> </div> </div> <div class="pdfpreview-row cols-2"> <div class="pdfpreview-col hoverable clickable" disabled="false"> <div class="disable-checkbox-wrapper"> <label for="disable-checkbox-4" style="width: 100%;height: 100%;top: 0;left: 0;position:...

CSS

/* PdfPreview Structuring */
.pdfpreview-row{
    text-align:center;
    width: 100%;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    position: relative;
}
.pdfpreview-row:last-of-type{
    border-bottom: 1px solid black;
}
/* Rows border removal */
.pdfpreview-row.border-bottom-0{
    border-bottom : none;
}
.pdfpreview-row.border-bottom-0 + .pdfpreview-row{
    border-top : none;
}
/* Cols */
.pdfpreview-row > .pdfpreview-col {
    width: 100%;
    padding: 0.3cm;
    position: relative;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Cols based on parent */
.pdfpreview-row.cols-2 > .pdfpreview-col {
    width: 50%;
    display: inline-block;
}
.pdfpreview-row.cols-2{
  text-align: left;
}

/* Cols equal width based on parent */
/* one item */
.pdfpreview-row.cols-same-width > .pdfpreview-col:first-child:nth-last-child(1){
/* -or- li:only-child { */
    width: 100%;
    display: inline-block;
}

/* two items */
.pdfpreview-row.cols-same-width > .pdfpreview-col:first-child:nth-last-child(2),
.pdfpreview-row.cols-same-width > .pdfpreview-col:first-child:nth-last-child(2) ~ .pdfpreview-col {
    width: 50%;
    display: inline-block;
}

/* three items */
.pdfpreview-row.cols-same-width > .pdfpreview-col:first-child:nth-last-child(3),
.pdfpreview-row.cols-same-width > .pdfpreview-col:first-child:nth-last-child(3) ~ .pdfpreview-col {
    width: 33.3333%;
    display: inline-block;
}

/* four items */
.pdfpreview-row.cols-same-width > .pdfpreview-col:first-child:nth-last-child(4),
.pdfpreview-row.cols-same-width > .pdfpreview-col:first-child:nth-last-child(4) ~ .pdfpreview-col {
    width: 25%;
    display: inline-block;
}

/* Cols border removal */
.pdfpreview-row.border-inner-0 > .pdfpreview-col:not(:first-of-type) {
    border-left: none;
}
/* Images */
.pdfpreview-col img{
    width: 100%;
    max-height: 5cm;
}

.text-center {
  text-align: center;
}
/* Page margin */
@page {
    margin: 1cm;
}