JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<div>
<div class="float kolumn--2 red"></div>
<div class="float kolumn--2 green"></div>
</div>

<div style="margin-top:10px">
<div class="float kolumn--3 red"></div>
<div class="float kolumn--3 green"></div>
<div class="float kolumn--3 blue"></div>
</div>

<div style="margin-top:10px">
<div class="float kolumn--4 red"></div>
<div class="float kolumn--4 green"></div>
<div class="float kolumn--4 blue"></div>
<div class="float kolumn--4 yellow"></div>
</div>

CSS

div{
  height:20px
}
.fixerad--kolumn--1,
.kolumn--1 {
  width: 100%;
  clear: both;
}
.fixerad--kolumn--2,
.kolumn--2 {
  width: 50%;
}
.fixerad--kolumn--3,
.kolumn--3 {
  width: 33.3333%;
}
.fixerad--kolumn--4,
.kolumn--4 {
  width: 25%;
}
.fixerad--kolumn--5,
.kolumn--5 {
  width: 20%;
}
.fixerad--kolumn--6,
.kolumn--6 {
  width: 16.6667%;
}
.fixerad--kolumn--7,
.kolumn--7 {
  width: 14.2857%;
}
.fixerad--kolumn--8,
.kolumn--8 {
  width: 12.5%;
}
.fixerad--kolumn--9,
.kolumn--9 {
  width: 11.1111%;
}
.fixerad--kolumn--10,
.kolumn--10 {
  width: 10%;
}
.fixerad--kolumn--11,
.kolumn--11 {
  width: 9.0909%;
}
.fixerad--kolumn--12,
.kolumn--12 {
  width: 8.33333%;
}
.fixerad--kolumn--13,
.kolumn--13 {
  width: 7.69%;
}
.fixerad--kolumn--14,
.kolumn--14 {
  width: 7.14%;
}
.fixerad--kolumn--15,
.kolumn--15 {
  width: 6.66%;
}
.fixerad--kolumn--16,
.kolumn--16 {
  width: 6.25%;
}
.fixerad--kolumn--17,
.kolumn--17 {
  width: 5.88%;
}

.red{
  background-color:red;
}
.green{
  background-color:green;
}
.blue{
  background-color:blue;
}
.yellow{
  background-color:yellow;
}
.float{
  float:left;
}