JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menuBox">
<div class="menuBox_item">
  <h2><span>First</span></h2>
  <div>First Text</div>
</div>
<div class="menuBox_item">
  <h2><span>First Second</span></h2>
  <div>First Text</div>
</div>
<div class="menuBox_item">
  <h2><span>First</span></h2>
  <div>First Text</div>
</div>
<div class="menuBox_item">
  <h2><span>First</span></h2>
  <div>First Text</div>
</div>
<div class="menuBox_item">
  <h2><span>First</span></h2>
  <div>First Text</div>
</div>
<div class="menuBox_item">
  <h2><span>First</span></h2>
  <div>First Text</div>
</div>
<div class="menuBox_item">
  <h2><span>First</span></h2>
  <div>First Text</div>
</div>
<div class="menuBox_item">
  <h2><span>First</span></h2>
</div>
</div>

SCSS

body{
  background: url(http://1079638729.rsc.cdn77.org/pic/v2/gallery/preview/fon-more-morskie_zvezdy-plyazh-29315.jpg), lightblue;
  background-size: cover;
  color: white;
  font: 12pt "Comic Sans MS";
}

.menuBox{
  margin: 30px auto;
  width: 90%;
  padding-top: 50px;
  overflow: hidden;
}

.menuBox_item{
  padding: 20px;
  border-radius: 2px;
  position: relative;

  &:nth-child(even){
    border-left: 2px solid white;
  }
  
  &:nth-child(odd){
    border-right: 2px solid white;
  }
  
  &:last-child{
    border: none;
    
    h2 span:before{
      display: none;
    }
  }
  
  &:first-child h2 span:before{
    display: none;
  }
  
  div{
    padding: 50px;
    margin: 20px;
    background: black;
    opacity: 0.5;
    border-radius: 20px;
  }
  
  h2{
      position: absolute; 
      left: 0;
      width: 100%;
      top: -1.5em;
      overflow: hidden;
      font-size: 1.15em;
      text-align: center;
      
      span{
        position: relative;
        
        &:after, &:before{
          position: absolute;
          content: '';
          top: 50%;
          height: 2px;
          margin-top: -2px;
          width: 12312312px;
          display: block;
          background: white;
        }
        
        &:after{
          left: 130%;
        }
        
        &:before{
          right: 130%;
        }
      }
    }
}