JSFiddle - React, Tailwind, and code Playground

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">
         <p>a nested div</p>
        </div>
        
        <div class="another-box">
        <p>a nested div</p></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:green;
}
.box:nth-child(odd) {
    background-color:#CCC;
}
.inner-container {    
    margin-left:1em;
    background: blue;
}

.another-box {
  overflow: hidden;
} 
.another-box p:nth-child(1) {
    color:pink;
    margin-left: -20px;
    font-size: 29px;
}

.another-box p:nth-child(3) {
    color:green;
    margin-left: -30px;