JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<div class="box"><p class="boxBtm">Some text in the box</p></div>

CSS

body {
    background: #000;
}
.box {
    background: #b2b2b2;
    height: 60px;
    width: 210px;
    margin: 25px;
    padding: 20px;
    position: relative;
    /*overflow: hidden;*/
}
.box:before {
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    top: -9px;
    left: -9px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}
.box:after{
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    top: -9px;
    right: -9px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}
.box p {
    color: #fafafa;
}
.box .boxBtm:before {
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    bottom: -9px;
    left: -9px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}
.box .boxBtm:after{
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    bottom: -9px;
    right: -9px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}