<div class="tab-content-block">
    <ul class="tab-menu container">
      <li class="active">
        <div class="item-block">
          <div class="item-icon item-icon-1"></div>
        </div>
        <h3>Responsive<br>
        Websites</h3>
      </li>
      <li>
        <div class="item-block item-block-2">
          <div class="item-icon item-icon-2"></div>
        </div>
        <h3>e Commerce<br>
          Websites</h3>
      </li>
      <li>
        <div class="item-block item-block-3">
          <div class="item-icon item-icon-3"></div>
        </div>
        <h3>Daily blog<br>
        Websites</h3>
      </li>
      <li>
        <div class="item-block item-block-4">
          <div class="item-icon item-icon-4"></div>
        </div>
        <h3>Search based<br>
        Websites</h3>
      </li>
    </ul>
    <div class="tab-content container">
      <div>

        <h1>Lorem Ipsum is simply dummy text </h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
         centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>

        <p>t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
         software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentiallyunchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <div>
        <h1>Lorem Ipsum is simply dummy text </h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
         centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>

        <p>t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
         software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentiallyunchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <div>
        <h1>Lorem Ipsum is simply dummy text </h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
         centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>

        <p>t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
         software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentiallyunchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <div>
        <h1>Lorem Ipsum is simply dummy text </h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
         centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>

        <p>t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
         software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentiallyunchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
   <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

.tab-content-block .tab-menu{
  list-style-type: none;
  position: relative;
  right: 13px;
  top:15px;
  /*overflow: hidden;*/
  display: inline;
}

.tab-content-block .tab-menu li{
  display: inline-block;
  padding-top: 55px;
  padding-bottom: 30px;
  
}
.tab-content-block .tab-menu li:last-child{
  margin-left:3px; 
  border-bottom: 10px #fff;
}
.tab-menu li.active{
  box-shadow: 
   2px 0 6px -4px rgba(221, 221, 221, 1),
    -2px 0 6px -4px rgba(221, 221, 221, 1),
    0px 0px 0px 0px rgba(221, 221, 221, 1),
    -2px 2px 6px -4px rgba(221, 221, 221, 1);
  border: 1px  solid #dedede;
  border-bottom: none; 
  position:relative;
}
.tab-menu li.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  height: 10px;
  margin-bottom: -5px;
}
.tab-menu li.active h3{
  font-weight: bold;
  color: #5f5f5f;
}
.tab-menu li h3{
  font-family:segoeWPLight;
  font-size: 1.1875em;
  color: #676666;
  margin: 62px 0 0 40px;
  text-align: center;
  
}
.item-block{
  width: 100px;
  height: 55px;
  background: #6598e6;
  position: relative;
  
}
.item-block:before,
.item-block:after{
  content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
.item-block:before{
  top:-25px;
  border-bottom: 25px solid  #6598e6;
}
.item-block:after {
    bottom: -25px;
    border-top: 25px solid  #6598e6;
}
/*2*/
.item-block-2{
  background: #fdcf0a;
}
.item-block-2:before{
  top:-25px;
  border-bottom: 25px solid  #fdcf0a;
}
.item-block-2:after {
    bottom: -25px;
    border-top: 25px solid  #fdcf0a;
}
/*3*/
.item-block-3{
  background: #12b367;
}
.item-block-3:before{
  top:-25px;
  border-bottom: 25px solid  #12b367;
}
.item-block-3:after {
    bottom: -25px;
    border-top: 25px solid  #12b367;
}
/*4*/
.item-block-4{
  background: #e67624;
}
.item-block-4:before{
  top:-25px;
  border-bottom: 25px solid  #e67624;
}
.item-block-4:after {
    bottom: -25px;
    border-top: 25px solid  #e67624;
}

.item-icon{
  display: block;
  margin: 20px 0 0 30px;
}
.item-icon-1{
  background: url("img/mobile.png") no-repeat;
  background-size: 100%;
  height: 43px;
  width: 30px;
}
.item-icon-2{
  background: url("img/cart.png") no-repeat;
  background-size: 100%;
  height: 40px;
  width: 30px;
}
.item-icon-3{
  background: url("img/world.png") no-repeat;
  background-size: 100%;
  height: 30px;
  width: 30px;
}
.item-icon-4{
  background: url("img/search.png") no-repeat;
  background-size: 100%;
  height: 30px;
  width: 30px;
}

.tab-content-block{
  width: 1024px;
  
}
.tab-content{
  /*box-shadow: 0  4px 10px rgba(0,0,0,0.5);*/
  margin: 10px auto;
  box-shadow: 
   2px 0 6px -4px rgba(221, 221, 221, 1),
    -2px 0 6px -4px rgba(221, 221, 221, 1),
    2px 2px 6px -4px rgba(221, 221, 221, 1),
    -2px 2px 6px -4px rgba(221, 221, 221, 1);
  border: 1px  solid #dedede;
  overflow: hidden;
  height: 400px;
}
.tab-content .comp{
  background: url("img/iphone.png") no-repeat;
  height: 329px;
  width: 732px;
  box-shadow:none;
  border: none;
  position: relative;
  top:10px;
}

.tab-content>div h1{
  position: relative;
  top: 69px;
  font-family:segoeWPLight;
  font-size: 1.75em;
  color: #4f4f4f;
  padding-bottom: 20px; 
}

.tab-content>div p{
  position: relative;
  top: 69px;
  color: #818181;
  font-family: 'Univers 45 Light Oblique';
  font-size:1em;
}

$(document).ready(function(){
  $('.tab-content>div:not(":first-of-type")').fadeOut(250);

  $('.tab-menu li').each(function(i){
    $(this).attr('data-tab', 'tab' + i);
  });

  $('.tab-content>div').each(function(i){
    $(this).attr('data-tab', 'tab' + i);
  });
  $('.tab-menu li').on('click', function(i){
    var dataTab = $(this).data('tab');
    var getWrapper = $(this).closest('.tab-content-block');

    getWrapper.find('.tab-menu li').removeClass('active');
    $(this).addClass('active');

    getWrapper.find('.tab-content>div').fadeOut(250);
    getWrapper.find('.tab-content>div[data-tab=' + dataTab + ']').fadeIn(250);
  });
});