JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="wrap">
    <div style="background: orange;"></div>
    <div style="background: red;"></div>
    <div style="background: blue;"></div>
    <div style="background: green;"></div>
</div>

<div class="wrap">
    <div style="background: orange;"></div>
    <div style="background: red;"></div>
    <div style="background: blue;"></div>
    <div style="background: green;"></div>
</div>

<div class="wrap">
    <div style="background: orange;"></div>
    <div style="background: red;"></div>
    <div style="background: blue;"></div>
    <div style="background: green;"></div>
</div>

<div class="wrap">
    <div style="background: orange;"></div>
    <div style="background: red;"></div>
    <div style="background: blue;"></div>
    <div style="background: green;"></div>
</div>

CSS

.wrap {
    position: relative;
    width: auto; height: auto;
    background-color: silver;
    margin-bottom: 30px;
}

.wrap div {
    display: inline-block;
    width: 30px; height: 30px;
    margin: 5px;
    display: none;
}

.wrap:nth-child(1) div:nth-child(1) {
    display: block !important;
}

.wrap:nth-child(2) div:nth-child(2) {
    display: block !important;
}

.wrap:nth-child(3) div:nth-child(3) {
    display: block !important;
}

.wrap:nth-child(4) div:nth-child(4) {
    display: block !important;
}