JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section-header text-center">
  <h2>Testing</h2>
</div>

CSS

.section-header {
  position: relative;
}

.section-header h2 {
  border: 2px solid rgba(0, 0, 0, 0.1);
  padding: 0.3em 0.8em;
  display: inline-block;
}

.section-header::before,
.section-header::after {
  border-top: 1px solid black;
  display: block;
  height: 1px;
  content: " ";
  width: 40%;
  position: absolute;
  left: 0;
  top: 1.2em;
  opacity: 0.1;
}

.section-header::after {
  right: 0;
  left: auto;
}

.text-center {
    text-align: center !important;
}