JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"><h1>ABC</h1></div>

CSS

*{
  background:#fff;
}
.box
{
    height:100px;
    width:300px;
    border:2px solid #111;
    z-index:1; 
    position:relative;
}
h1
{
    text-align:center;
    vertical-align:middle;
    position:relative;
    
}
.box:before {
    position:absolute;
    top:-2px; 
    left:40%;
    content:"";
    display:block;
    height:10px;
    width:20%;
    background:white;
}

.box:after {
    position:absolute;
    bottom:-2px; 
    left:15%;
    content:"";
    display:block;
    height:10px;
    width:20%;
    background:white;
}