<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="tab-content 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">
  
      <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<br>
       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<br>
       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<br>
       software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> 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<br> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially<br> unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with<br> desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>
.tab-content{
  margin-top:100px;
  
}
.tab-content .tab-menu{
  list-style-type: none;
  width: 100%;
}

.tab-content .tab-menu li{
  display: inline-block;
  border-bottom: 1px solid #dedede;

}
.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;
  margin-right: 131px;
}
.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;
}
.tab-content>div{
  /*box-shadow: 0  4px 10px rgba(0,0,0,0.5);*/
  border:1px solid #dedede;
  border-top: none;
  height: 783px;
}
.tab-content .comp{
  background: url("img/iphone.png") no-repeat;
  height: 329px;
  width: 732px;
  box-shadow:none;
  border: none;
  position: relative;
  top: 69px;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.