JSFiddle - React, Tailwind, and code Playground

HTML

<div class='holder'>
  <div class='diamond1'>&#9830;</div>      
  <div class='diamond2'>&#9830;</div>      
  <div class='diamond3'>&#9830;</div>      
  <div class='diamond4'>&#9830;</div>      
  <div class='textspan'>WELCOME</div>
</div>

CSS

.holder {
    outline: 6px solid gray;
    border: 1px solid gray;
    width: 200px;
    height: 100px;
    position: relative;
}
.diamond1 {
    font-size: 40px;
    position: absolute;
    top: -12px;
    left: 50%;
}
.diamond2 {
    font-size: 40px;
    position: absolute;
    bottom: -10px;
    left: 50%;
}
.diamond3 {
    font-size: 40px;
    position: absolute;
    top: 20px;
    left: -1px;
}
.diamond4 {
    font-size: 40px;
    position: absolute;
    top: 20px;
    right: -1px;
}
.textspan {
    display: block;
    border: 1px solid green;
    background-color: green;
    margin: 25px auto;
    color: white;
    height: 48px;
    width: 160px;
    text-align: center;
    line-height: 48px;
}