JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<div id="l">
    <div id="v"></div><div id="h"></div>
</div>

CSS

#l {
    padding: 20px;
    border: 1px solid red;
    float: left;
}
#v, #h {
    -moz-box-shadow: 0 0 5px #80abc6;
    -webkit-box-shadow: 0 0 5px #80abc6;
    box-shadow: 0 0 5px #80abc6;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
}
#v {
    width: 48px;
    height: 192px;
}
#h {
    width: 96px;
    height: 48px;
}
#v:after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 38px;
    left: 0;
    height: 20px;
    background: #fff;
}
#h:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 20px;
    background: #fff;
}