JSFiddle - React, Tailwind, and code Playground

by cbsteph

HTML

<p>Test 1:</p>
<div class="parent1">
    <div class="colored"></div>
    <div class="colored"></div>
</div>

<p>Test 2:</p>
<div class="parent1">
<div class="nocolor"></div>
    <div class="parent2">
        <div class="colored"></div>
        <div class="colored"></div>
    </div>
 <div class="nocolor"></div>
</div>

CSS

div.colored {
    width: 300px;
    height: 100px;
    margin-bottom: 20px;
    border: 1px solid black;
}
div.colored:first-child {
    background-color: red;
}
div.colored:last-child {
    background-color: blue;
}    
div.nocolor {
    width: 300px;
    height: 100px;
    margin-bottom: 20px;
    border: 1px solid black;
}