JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>
<div class="foo">4</div>
<div class="foo">5</div>
<div class="foo">6</div>
<div class="foo">7</div>
<div class="foo">8</div>
<div class="foo">9</div>
<div class="foo">10</div>
<div class="foo">11</div>
<div class="foo">12</div>

CSS

.foo {
  width: 200px;
  height: 3em;
  background: orange;
  margin: .5em;
}
.foo:nth-child(2n) { /* каждый второй с синей рамкой */
  outline: dashed 2px blue;
}
.foo:nth-child(5n) { /* каждый пятый перекошен */
  transform: skewx(-10deg);
}

.foo:nth-child(7) { /* седьмой - синий */
  background: lightblue;
}

JavaScript

div