JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="block-round">
  <span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span>
  <div class="block-round-content">
  Текст
  </div>
  <span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>
  </div>

CSS

.r1, .r2,  .r3, .r4 {
    display: block; 
    height: 1px;
    background: green;
    overflow: hidden;
   }
   .r1 {  margin: 0 5px; }
   .r2 {  margin: 0 3px; }
   .r3 {  margin: 0 2px; }
   .r4 {  margin: 0 1px; height: 2px; }
   .block-round-content { 
    background: green; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */