JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<h1>Heading</h1>

SCSS

html {
  font-size: 16px;
  body {
    margin: 1rem;
  }
}

h1 {
  font-size: 4rem;
  &::before,
  &::after {
    display: inline-block;
    content: "";
    border-top: .3rem solid black;
    width: 4rem;
    margin: 0 1rem;
    transform: translateY(-1rem);
  }
}