JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<div class="dummy">
    hi
</div>
<div class="container">
    
    <div class="margins">
        
        <div class="borders">
            <div class="paddings">
                <div class="content">
                </div>
            </div>
        </div>
        
    </div>
</div>

CSS

html,body { margin:0; padding:0;}
.dummy {
    width: 100px;
    height: 100px;
    padding: 5px;
    margin: 8px;
    border: solid 3px black;
    background: lightblue;
}
.container {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 108px;
    height: 108px;
}
.container * {
    position:absolute;
    top: 0;
    bottom:0;
    right: 0;
    left: 0;
}

.margins {
    position:absolute;
    top: -8px;   
    bottom: -16px;    
    left: -8px;
    right: -16px;
    border: solid 8px rgba(255, 255, 0, .5);
    box-sizing: border-box;
}
.borders {
    border: 3px solid rgba(255, 0, 0, .5);;
}
.paddings {
    border: 5px solid rgba(0, 0, 255, .2);
}

.content {
    background: rgba(0, 255, 0, .2);   
}