JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<div class="padre">
    <div class="hija"></div>
</div>
<br />
<div class="padre">
    <div class="otra"></div>
    <div class="hija"></div>
</div>
<br />
<div class="padre">
    <div class="otra">
        <div class="hija"></div>
    </div>
</div>
<br />
<div class="padre">
    <div class="otra"></div>
    <div class="otra">
        <div class="hija"></div>
    </div>
</div>
<br />
<div class="padre">
    <div class="otra"></div>
    <div class="otra">
        <div class="otra"></div>
        <div class="hija"></div>
    </div>
</div>
<br />
<div class="padre">
    <div class="otra">
        <div class="otra"></div>
        <div class="hija"></div>
    </div>
</div>

CSS

.padre { width: 500px; height: 500px; background-color: red; border: 1px solid black; }
.otra { width: 100px; height: 100px; background-color: green; border: 1px solid white; }
.hija { border: 1px solid yellow; }
.padre > .hija { width: 50px; height: 50px; background-color: blue; }