JSFiddle - React, Tailwind, and code Playground

HTML

<h1><span>Heading</span></h1>

CSS

h1 {
    margin: 10px ;
    padding: 10px ;
    text-align: center ;
    box-shadow: 0 0 0 3px #ff6666 inset, 0 0 0 5px rgba(255,104,104,0.5) inset ;
    position: relative ;
    z-index: 100 ;
    background: #fff ;
    overflow: hidden ;
}

h1:before {
  border-radius: 50% ;
  display: block ;
  position: absolute ;
  top: -5px ;
  left: -5px ;
  width: 10px ;
  height: 10px ;
  content: "" ;
  background-color: #ff6666 ;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ff6666, 0 0 0 7px rgba(255,104,104,0.5) ;
}

span::before {
  border-radius: 50% ;
  display: block ;
  position: absolute ;
  top: -5px ;
  right: -5px ;
  width: 10px ;
  height: 10px ;
  content: "" ;
  background-color: #ff6666 ;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ff6666, 0 0 0 7px rgba(255,104,104,0.5) ;
}


h1::after {
  border-radius: 50% ;
  display: block ;
  position: absolute ;
  bottom: -5px ;
  left: -5px ;
  width: 10px ;
  height: 10px ;
  content: "" ;
  background-color: #ff6666 ;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ff6666, 0 0 0 7px rgba(255,104,104,0.5) ;
}

span::after {
  border-radius: 50% ;
  display: block;
  position: absolute ;
  bottom: -5px ;
  right: -5px ;
  width: 10px ;
  height: 10px ;
  content: "" ;
  background-color: #ff6666 ;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ff6666, 0 0 0 7px rgba(255,104,104,0.5) ;
}