JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"></div> <!-- this div bg color will be blue -->
<div class="test"></div> <!-- this div bg color will be red-->
<div class="test"></div> <!-- this bg div color will be blue -->
<div class="test"></div> <!-- this bg div  color will be red-->
<div class="test"></div> <!-- this bg div color will be blue -->
<div class="test"></div> <!-- this bg div  color will be red-->
<div class="test"></div> <!-- this bg div color will be blue -->
<div class="test"></div> <!-- this bg div  color will be red-->
<div class="test"></div> <!-- this bg div color will be blue -->
<div class="test"></div> <!-- this bg div  color will be red-->

CSS

.test {
    height: 1em;    
}

.test:nth-child(odd) {
    background: blue;
}
.test:nth-child(even) {
    background: red;
}