JSFiddle - React, Tailwind, and code Playground

by bemulima

HTML

<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>

CSS

.block{
    width:200px;
    height:200px;
    margin:20px;
    float:left;
    position:relative;
    text-align:center;
    line-height:200px;
}
.block:before{
    content:'';
    position:absolute;
    top:-10px;
    left:0;
    width:100%;
    height:220px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}
.block:after{
    content:'';
    position:absolute;
    top:0;
    left:-10px;
    width:220px;
    height:100%;
    border-left:1px solid #000;
    border-right:1px solid #000;
}