<ul class="tabs">
  <li class="active" data-content-id="team">Team</li>
  <li data-content-id="about">About</li>
  <li data-content-id="contact">Contact</li>
</ul>
<div class="content">
  <p id="team" style="display:block">
    Team
  </p>
  <p id="about">
    About
  </p>
  <p id="contact">
    Contact
  </p>
</div>
@import "compass/css3";

body {
  background-color:#53626E;
  font-family:sans-serif;
}

.content {
  background-color:#FFF;
  width: 400px; height:300px;
  margin: 0 auto;
  border-radius:3px;
  p {
    height:100%; width:100%;
    margin:0; padding:30px 25px;
    display:none;
    /* Just for show */
    line-height:300px;
    padding:0;
    text-align:center;
    color:#888;
  }
}
.tabs {
  &, li {
    list-style:none;
    margin:0 0 -3px 0; padding:0;
  }
  & {
    background-color:#53626E;
    width: 400px; height:auto;
     margin: 50px auto 0px auto;
  }
  li {
    width: auto;
    display:inline-block;
    padding: 10px 25px 10px 25px;
    color:#BBB;
    cursor:pointer;
    &.active {
      background-color:#FFF;
      border-top-left-radius:3px;
      border-top-right-radius:3px;
      color:#333;
    }
  }
}
$('.tabs li').click(function(){
  
  // Content
  $('.content p').hide();
  $('#' + $(this).attr('data-content-id')).show();
  
  // Tabs
  $('.tabs li').removeClass('active');
  $(this).addClass('active');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js