JSFiddle - React, Tailwind, and code Playground

by JoeCoder

HTML

<div class="layer layer1" style="position: relative; display: block; width: 400px; border: 1px solid black;">
	Container
	<div class="layer layer2" contentEditable>Edit me</div>
    <div class="layer layer3">
        <div class="layer layer4" contentEditable>Edit me</div>
    </div>
</div>

CSS

div.layer { position: relative; float: left; }

div.layer1 { width: 400px; border: 1px solid black }
div.layer2 { margin-top: 20px; left: 100px; width: 100px; margin-right: -100px; border: 1px solid blue }
div.layer3 {  margin-top: 30px; left: 170px; width: 100px; margin-right: -100px; border: 1px solid red }
div.layer4 {  margin-top: 30px; left: 20px; width: 60px; margin-right: -60px; border: 1px solid green }