JSFiddle - React, Tailwind, and code Playground

by Thiery Laverdure

HTML

<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>

CSS

.box1{
    position:relative;
    background:#FFF;
    width:200px;
    height:200px;
    border:solid 2px #090;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin:0 auto;
}
.box2{
    position:absolute;
    width:210px;
    height:180px;
    background-color:#FFF;
    top:10px;
    left:-5px;
}
.box3{
    position:absolute;
    width:180px;
    height:210px;
    background-color:#FFF;
    top:-5px;
    left:10px;
}
.box4{
   border:solid 1px #009;
    width:175px;
    height:175px;
    margin: 10px auto;
    position:relative;
}