JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="one"></div>
<div class="two"></div>

CSS

div{
    width:20%;
    padding-bottom:20%;
    margin:5% 10%;
    background-color: #6095C9;
    position:relative;
    float:left;
}
div:after,div:before{
    content:"";
    position:absolute;
    background-color:#fff;
}

.one:before,.two:before{
    margin: 0 48%;
    width:4%;
    height:100%;
}
.one:after,.two:after{
    margin: 48% 0;
    height:4%;
    width:100%;
}
.two:before{
    height:50%;
    bottom:0;
}