JSFiddle - React, Tailwind, and code Playground

HTML

<div class="h-border">
  <div class="heading">
    <h2>About Me</h2>
  </div>
</div>

CSS

.h-border {
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 30px;
margin-bottom: 10px;
}

.heading {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
/*background-image: url(../img/cross-pattern.png);
background-repeat: repeat;*/
background: #f00;
}

h2 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
text-transform: uppercase;
margin: 0 auto;
padding: 0;
background:#fff;
width:30%;
display: inline;
}