JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<div class="container">
    <div class="box">a div</div>
    <div class="box">a div</div>
    <div class="box">a div</div>
    <div class="inner-container">
        <div class="another-box">a nested div</div>
        <div class="another-box">a nested div</div>
        <div class="another-box">a nested div</div>
        <div class="another-box">a nested div</div>
        <div class="another-box">a nested div</div>
        <div class="another-box">a nested div</div>
        <div class="another-box">a nested div</div>
        <div class="another-box">a nested div</div>
    </div>
</div>

CSS

.container {
    background-color:#f2f2f2;
}
.box:nth-child(even) {
    background-color:#CCC;
}
.inner-container {    
    margin-left:1em;
}
.another-box:nth-child(even) {
    background-color:#333;
    color:white;
}