JSFiddle - React, Tailwind, and code Playground

HTML

<div class="headline">
    <div class="box">
    <span class="panel">Test Panel</span>
    </div>
</div>

CSS

.headline {
  display: flex;
  justify-content: center;
  margin-bottom: 40px; 
  margin-top: 150px;
}
.headline .box {
    position: relative;
    top: 10px;
    left: -70px; 
}

.headline .box:after {
      content: "";
      width: 45px;
      height: 45px;
      background: black;
      position: absolute;
      border-radius: 50%;
      top: -85px;
      left: 105px;
      z-index: 10; 
}
      
.headline .panel {
    background: white;
    color: #ff004f;
    font-size: 46px;
    font-family: "Quicksand", sans-serif;
    padding: 10px;
    font-weight: 700;
    max-width: 250px;
    display: block;
    line-height: 46px;
    position: relative; 
}
.headline .panel:hover {
      animation-timing-function: cubic-bezier(0.120, 0.485, 0.950, 0.475);
      animation: pendulum 2s infinite; 
      animation-delay: -1.3s
}
.headline .panel:before {
      content: "";
      width: 155px;
      height: 10px;
      background: white;
      display: block;
      transform: translateX(8px) rotate(148deg);
      position: absolute;
      top: -40px;
      left: -16px;
      border-radius: 5px; 
 }
.headline .panel:after {
      content: "";
      width: 150px;
      height: 10px;
      background: white;
      display: block;
      transform: translateX(-10px) rotate(-148deg);
      position: absolute;
      top: -40px;
      right: -18px; 
}

@keyframes pendulum {
  0% {
    transform: rotate(-25deg);
    transform-origin: 50% -50%; 
  }
  50% {
    transform: rotate(25deg);
    transform-origin: 50% -50%; 
  }
  100% {
    transform: rotate(-25deg);
    transform-origin: 50% -50%; 
  } 
}