<div class="tab-content-block container-fluid">
    <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>
        <div class="comp"></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 class="comp"></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 class="comp"></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 class="comp"></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>

.tab-content-block{
  margin-top:100px;
  
}
.tab-content-block .tab-menu{
  list-style-type: none;
  width: 
}

.tab-content-block .tab-menu li{
  display: inline-block;
  padding-top: 55px;
  padding-right: 68px;

}
.tab-menu li.active{
  border:1px solid #dedede;
  border-bottom: none;
  
}
.tab-menu li.active h3{
  font-weight: bold;
  color: #5f5f5f;
}
.tab-menu li h3{
  font-family:segoeWPLight;
  font-size: 1.1875em;
  color: #676666;
  margin-top: 62px;
  text-align: center;
  
}
.item-block{
  width: 100px;
  height: 55px;
  background: #6598e6;
  position: relative;
  margin-left: 68px;
  
}
.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{
  height: 30px;
  width: 30px;
  display: block;
}
.item-icon-1{
  background: url("img/mobile.png") no-repeat;
  background-size: 100%;
}
.item-icon-2{
  background: url("img/cart.png") no-repeat;
  background-size: 100%;
}
.item-icon-3{
  background: url("img/world.png") no-repeat;
  background-size: 100%;
}
.item-icon-4{
  background: url("img/search.png") no-repeat;
  background-size: 100%;
}

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

.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);
  });
});