JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<div class="container">
	<div class="pdfpreview-row cols-same-width">
		<div class="pdfpreview-col">Célula 1</div>
		<div class="pdfpreview-col">Célula 2</div>
		<div class="pdfpreview-col">Célula 3</div>
	</div>
	<div class="pdfpreview-row">
		<div class="pdfpreview-col">Célula 4</div>
		<div class="pdfpreview-col">Célula 5</div>
		<div class="pdfpreview-col">Célula 6</div>
	</div>
	<div class="pdfpreview-row">
		<div class="pdfpreview-col">
			<h4>
	  			Imagens
	  		</h4>
	  	</div>
	</div>
	<div class="pdfpreview-row cols-2">
		<div class="pdfpreview-col">
			<img src="https://services3.arcgis.com/KjwM1xptHuBxMVga/arcgis/rest/services/CYMI_Mantiqueira_Desvios/FeatureServer/0/29/attachments/2?token=hrIZZEU3I1YsdUSC4qG24tZtmdn-9ik0sapJiTmG8bdqYg63WqQjy3cDEbmgkiSH5IktXoNX9JDazpTWJYdhHpvQ_W79b2uA2h-Sq1xNrSFasHTTfRHD-zhAuuAJB3L2t2QJWSclrumSjDhTnsDAjf6mn0rknmK6ECzX6_5iVUoXJxRjTJns2e0nztIK014dh61x0zJsi5zCG-uzHBACFyyW2pmEmqq3QgCHADxi9H93BJfXgrBAqlhOtsonBafibx8_IK-RbkchQHlo66f9XCnllZZ61_M8FeDLg0sc55o.">
		</div>
		<div class="pdfpreview-col">
			<img src="https://services3.arcgis.com/KjwM1xptHuBxMVga/arcgis/rest/services/CYMI_Mantiqueira_Desvios/FeatureServer/0/29/attachments/2?token=hrIZZEU3I1YsdUSC4qG24tZtmdn-9ik0sapJiTmG8bdqYg63WqQjy3cDEbmgkiSH5IktXoNX9JDazpTWJYdhHpvQ_W79b2uA2h-Sq1xNrSFasHTTfRHD-zhAuuAJB3L2t2QJWSclrumSjDhTnsDAjf6mn0rknmK6ECzX6_5iVUoXJxRjTJns2e0nztIK014dh61x0zJsi5zCG-uzHBACFyyW2pmEmqq3QgCHADxi9H93BJfXgrBAqlhOtsonBafibx8_IK-RbkchQHlo66f9XCnllZZ61_M8FeDLg0sc55o.">
		</div>
		<div class="pdfpreview-col">
			<img...

CSS

/*

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.row.cols-1 > .col {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.row.cols-2 > .col {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.row.cols-3 > .col {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.row.cols-4 > .col {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.row.cols-5 > .col {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.row.cols-6 > .col {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.row.cols-7 > .col {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.row.cols-8 > .col {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.row.cols-9 > .col {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.row.cols-10 > .col {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.row.cols-11 > .col {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.row.cols-12 > .col {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
*/

/* PdfPreview Structuring */

/* Rows */
.pdfpreview-row{
    text-align:center;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    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:...