JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="midSection sections">
  <div class="line"></div>
  <div class="sectionHeader">How to purchase</div>
  <div class="menuLine">
    <div id="subScription" class="menu" style="color:grey;">Subscription</div>
    <div id="inStore" class="menu" style="color: black;">current Issues</div>
    <div id="onLine" class="menu" style="color: black;">Digital Edition</div>
  </div>
  <div id="firstBlock" class="middleBlock">
    <div class="firstBlockContent leftblock">
      <h3>
                                              "subscribe"<br>"to blah"
                                          </h3>
    </div>

  </div>
  <div id="secondBlock" class="middleBlock" style="background:blue;">
    <div class="secondBlockContent leftblock">
      <h3>
                                              "subscribe"<br>"to blah"
                                          </h3>
    </div>

  </div>
  <div id="thirdBlock" class="middleBlock" style="background:lightgreen;">
    <div class="secondBlockContent leftblock">
      <h3>
                                              "subscribe"<br>"to blah"
                                          </h3>
    </div>

  </div>


</div>

CSS

.line {
    background: none repeat scroll 0 0 #E5E5E5;
    height: 1px;
    position: relative;
    top:10px;
    z-index: 0;
    margin: 0 80px;
}

.midSection .sectionHeader {
    width: 230px;
    margin-bottom: 18px;
}

.sectionHeader{
    background: none repeat scroll 0 0 #ffffff;
    font-size: 20px;
    line-height: 21px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.menuLine{
    position: relative;
    text-align: center;
    margin-bottom: 10px;
}

.menuLine div{
    position: relative;
    margin: 10px 0;
}

.menuLine .menu{
    font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;
    padding-left: 20px;
    padding-right: 20px;
    text-transform: uppercase;
    border-right-style: solid;
    border-width: thin;
    border-color: #E5E5E5;
    margin-right: -3px;
    font-size: 13px;
}

.menu {
    display: inline-block;
    zoom: 1;
    vertical-align: top;
    height: 15px;
}

.menuLine .menu#onLine {
    border: none;
}

.middleBlock {
    
    height: 100px;
    padding: 30px 100px;
    background: red;
}

JavaScript

$(document).ready(function() {
	$('.middleBlock').hide();
});

$('#subScription').click(function() {
	$('#firstBlock').show();
  $('#secondBlock').hide();
  $('#thirdBlock').hide();
});

$('#inStore').click(function() {
	$('#firstBlock').hide();
  $('#secondBlock').show();
  $('#thirdBlock').hide();
});

$('#onLine').click(function() {
	$('#firstBlock').hide();
  $('#secondBlock').hide();
  $('#thirdBlock').show();
});