JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<div class="wordCloud">
  <a href="#">MČR PC</a>
  <a href="#">Herní PC</a>
  <a href="#">Konfigurátor</a>
  <a href="#">Master Gamer</a>
  <a href="#">Alfa Gamer</a>
  <a href="#">Kancelářské PC</a>
  <a href="#">Pracovní stanice</a>
  <a href="#">Online Gamer</a>
  <a href="#">MČR Finále</a>
  <a href="#">Elite Work</a>
  <a href="#">Výprodej</a>
  <a href="#">Workstation</a>
  <a href="#">Enterprice</a>
</div>

CSS

.wordCloud a:nth-child(n+3):nth-child(-n+6) {
    background-color: blue;
}

.wordCloud {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.wordCloud a {
  -webkit-flex: 1 auto;
  flex: 1 auto;
  padding: 0.5rem;
  text-align: center;
  display: block;
  background-color: #88D498;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  color: #fff;
}


/* Demo Styles */

body {
  font: 300 24px/1.5 sans-serif;
  background-color: #222;
  padding:10px;
}