JSFiddle - React, Tailwind, and code Playground

by andreortigao

HTML

<div id="css" class="container">
    <h1>css</h1>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div id="example" class="container">
    <h1>example</h1>
    <div></div>
    <div></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <div></div>
    <div></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <div></div>
    <div></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <div></div>
    <div></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <div></div>
    <div></div>
    <div class="grey"></div>
    <div class="grey"></div>
</div>

CSS

#css div:nth-of-type(4n+3) { background-color: grey; }/**/
#css div:nth-of-type(4n) { background-color: grey; }/**/

/* below is just setup rules */
.container{ display:inline-box; width: 40%; margin:2px; float:left; border: solid 1px red;}

.container div { width: 100%; height: 20px; border: solid 1px black; }

.grey { background-color: grey;}