JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Heading</h1>

CSS

h1 {
    margin: 10px ;
    padding: 10px ;
    text-align: center ;
    box-shadow: 0 0 0 5px #ff6666 inset ;
    position: relative ;
    z-index: 100 ;
    background: #fff ;
    overflow: hidden ;
}

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

h1::after {
  border-radius: 50% ;
  display: block ;
  position: absolute ;
  bottom: -10px ;
  right: -10px ;
  width: 20px ;
  height: 20px ;
  content: "" ;
  background-color: #ff6666 ;
  box-shadow: 0 0 0 2px #fff, 0 0 0 7px #ff6666 ;
}