JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div class='test'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>    
</div>

<br/>
<div class="test orange">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<br/>
<div class="test red">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<br/>
<div class="test green">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

div.test div:nth-child(odd){
    background-color:rgba(255,255,255,0.06);
} 
div.test div:nth-child(even){
    background-color:rgba(0,0,0,0.06);
} 
div.test{
    background:#ececec;
    display:block;
}
div.test div{
    display:block;
    height:20px;    
}
div.orange {
    background:#F5E8AE;
}
div.red{
    background:#E3B8AF;    
}
div.green {
    background:#C0E3AF;
}