JSFiddle - React, Tailwind, and code Playground

by khamer

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>
<div class="foo">13</div>
<div class="foo">14</div>
<div class="foo">15</div>
<div class="foo">16</div>
<div class="foo">17</div>
<div class="foo">18</div>
<div class="foo">19</div>
<div class="foo">20</div>
<div class="foo">21</div>
<div class="foo">22</div>
<div class="foo">23</div>
<div class="foo">24</div>
<div class="foo">25</div>
<div class="foo">26</div>
<div class="foo">27</div>
<div class="foo">28</div>
<div class="foo">29</div>
<div class="foo">30</div>
<div class="foo">31</div>
<div class="foo">32</div>
<div class="foo">33</div>
<div class="foo">34</div>
<div class="foo">35</div>
<div class="foo">36</div>
<div class="foo">37</div>
<div class="foo">38</div>
<div class="foo">39</div>
<div class="foo">40</div>

CSS

.foo {
  border: 1px solid #eee;
  display: inline-block;
  width: 3rem;
  line-height: 3;
  text-align: center;
  background: #fff;
}

.foo:nth-child(4n + 1):not(:nth-child(3n + 1)) {
  background: #ffe;
}