JSFiddle - React, Tailwind, and code Playground

by Junior Thiesen

HTML

<div class="linha">
  <div class="coluna-6">Coluna de 6</div>
  <div class="coluna-6">Coluna de 6</div>
</div>
<div class="linha">
  <div class="coluna-4">Coluna de 4</div>
  <div class="coluna-4">Coluna de 4</div>
  <div class="coluna-4">Coluna de 4</div>
</div>
<div class="linha">
  <div class="coluna-3">Coluna de 3</div>
  <div class="coluna-3">Coluna de 3</div>
  <div class="coluna-3">Coluna de 3</div>
  <div class="coluna-3">Coluna de 3</div>
</div>

CSS

@charset "utf-8";

.linha, 
div[class^="coluna"] {
    box-sizing: border-box;
}

.linha:before,
.linha:after {
    content: " ";
    display: table;
}

.linha:after {
    clear: both;
}

div[class^="coluna"] {
    position: relative;
    float: left;
    display: block;
}

div[class^="coluna"] + div[class^="coluna"] {
    margin-left: 1.6%;
}

.coluna-1 {
    width: 6.86666666667%;
}

.coluna-2 {
    width: 15.3333333333%;
}

.coluna-3 {
    width: 23.8%;
}

.coluna-4 {
    width: 32.2666666667%;
}

.coluna-5 {
    width: 40.7333333333%;
}

.coluna-6 {
    width: 49.2%;
}

.coluna-7 {
    width: 57.6666666667%;
}

.coluna-8 {
    width: 66.1333333333%;
}

.coluna-9 {
    width: 74.6%;
}

.coluna-10 {
    width: 83.0666666667%;
}

.coluna-11 {
    width: 91.5333333333%;
}

.coluna-12 {
    width: 100%;
    margin-left: 0;
}

@media only screen and (max-width: 480px) {
	
	.linha:before,
	.linha:after {
		display: none;
	}
	
	div[class^="coluna"]{
		float: none;
        width: auto;
		margin-bottom: 0 !important;
	}
  
    div[class^="coluna"] + div[class^="coluna"] {
        margin-left: 0;
    }
	
    .linha {
        margin-bottom: 0 !important;
		margin: 0 0 !important;
    }
	
    .linha:last-child div[class^="coluna"]:last-child {
        margin-bottom: 0 !important;
    }
}