JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="logo"></div>
  <div class="text">
    <span>text</span>
  </div>
</div>

CSS

.block{
  position:relative;
  margin:40px;
  width:300px;
  height:200px;
  border:3px solid #bbb;
  border-top:0;
  box-sizing:border-box;
}
.text{
  position:absolute;
  padding:25px 5px 5px 5px;
  top:0;
  width:100%;
  height:100%;
  text-align:center;
  box-sizing:border-box;
}
.text:after{
  content:'';
  position:absolute;
  display:block;
  top:0;
  right:0;
  width:calc(50% - 30px);
  height:0;
  border-top:3px solid #bbb;
}
.text:before{
  content:'';
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:calc(50% - 30px);
  height:0;
  border-top:3px solid #bbb;
}
.logo{
  position:relative;
  margin:0 auto;
  top:-25px;
  width:50px;
  height:50px;
  background:#bbb;
  border-radius:100%;
}
.logo