JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="main">
  <div>
    Link und Text
  </div>
  <div>
    Mach so viele Container rein, wie du willst.
  </div>
  <div>
    Schreib Text rein.
  </div>
  <div>
    Mach sonst irgendwas.
  </div>
  <div>
    Aber dein Weg
  </div>
  <div>
    ist auf jeden Fall
  </div>  
  <div>
    nicht der richtige,
  </div>
  <div>
    denn auf positin: absolute
  </div>
  <div>
    sollte wenn möglich verzichtet werden
  </div>
  <div>
    und es gibt nur ein paar Ausnahmen
  </div>
  <div>
    wo dies sinnvoll ist.
  </div>
  <div>
  
  </div>
  <div>
  
  </div>  
  <div>
  
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
}

.main {
  width: 1000px;
  max-width: calc(100% - 30px);
  background: black;
  display: flex;
  flex-wrap: wrap;
}

.main > div {
  color: white;
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 8px;
  margin-right: 8px;
}