<div class="container">
  <ul class="menu">
    <li class="first active">First tab</li>
    <li class="second">Second tab</li>
    <li class="third">Third tab</li>
  </ul>
  <div class="content">
    <div class="item first">
      <h4>Lorem ipsum dolor sit amet, </h4>
      <p>consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue</p>
      <p>consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue</p>
    </div>
    <div class="item second">
      <h4>Lorem ipsum dolor sit amet, </h4>
      <p>consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue</p>
      <img src="https://cdn.pixabay.com/photo/2016/10/26/09/19/arbutus-1771003__340.jpg" class="rwd">
    </div>
    <div class="item third">
     <h4>Lorem ipsum dolor sit amet, </h4>
      <p>consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue</p>
      <p>Third</p>
    </div>
  </div>
</div>  

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin-ext');

$red: #bf2424;
$dark: #333;
$grey: #f7f7f7;
$white: #fff;

*{
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box;      

}
html{
  height: 100%;
}
body{
  background-color: #1fc8db;
  background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}
.container{
  margin: 0 auto;
  width: 500px;
  padding:10px;
}
.menu{
  margin-bottom: -1px;
  padding: 0px;
  
  position: relative;
  padding: 0px;
  li{
    display:inline-block;
    padding: 10px;
    background-color: $grey;
    border: 1px solid $dark;
     border-bottom:0px;
     z-index: 2;
   
    &:hover, &.active{
      background-color: $white;
       color: $red;
       z-index: 1000;
      position: relative;
    }
  }
}
.content{
  padding: 0;
  z-index: 12;
  position: relative;
  .item{
    border:1px solid $dark;
    box-shadow: 2px 2px $dark;
    min-height: 50px;
    padding: 10px;
    display:none;
    background: $white;
    
    &:first-of-type{
      display:block;
      h4{
          color: $red;
      }
    }
  }
  
  .rwd{
    max-width:100%;
    display:block;
  }
}

$('.menu li').click(function() {
	var values = $(this).attr('class');
  
  $('.menu li').removeClass('active');
  $(this).addClass('active');
  
		$('.content .item').hide();
		$('.content .' + values).show();
});