JSFiddle - React, Tailwind, and code Playground

HTML

<br>
 <BR>
 <br>
 <BR>   
<section id="Work" class="row">
              <div class="tab">
                    <div class="title"><h1><Span class="highlight">My Work</Span></h1></div>
    <!--   remove the spacer             <div class="spacer"></div>-->

                </div>   
                <div class="clearfix"></div>
                      <article>Some Content</article>
        </section>

CSS

.tab {margin-left:-2px;border-bottom: solid 2px rgba(0,0,0,0.3);margin-right:-2px;}
.title {margin-bottom:-2px;background-color:#fff;padding-left:10px;padding-right:10px;}
.row {
    width: 100%;
    display: block;
display:content-box;
    margin: 0 auto 15px auto;
  border-left: solid 2px rgba(0,0,0,0.3);
   border-right: solid 2px rgba(0,0,0,0.3);
   border-bottom: solid 2px rgba(0,0,0,0.3);
   border-radius: 0px 8px 8px 8px;
   -moz-border-radius: 0px 8px 8px 8px;
   -webkit-border-radius: 0px 8px 8px 8px;
   padding-top:2em;
   padding-bottom:2em;
   text-align:left;
    max-width: 1200px;
}

.tab {
    margin-top:-60px;
   display:content-box;
    float:left;
    width:100%
}
.spacer {

      border-bottom: solid 2px rgba(0,0,0,0.3);
      float:right;
}
.title {
 border-left: solid 2px rgba(0,0,0,0.3);
   border-right: solid 2px rgba(0,0,0,0.3);
   border-top: solid 2px rgba(0,0,0,0.3);
   border-radius: 8px 8px 0px 0px;
   -moz-border-radius: 8px 8px 0px 0px;
   -webkit-border-radius: 8px 8px 0px 0px;
  
   float:left;
   width:auto;
}
.clearfix {
    display:block;
    clear:both;
    width:100%;
    }

  #work{
  
    }