div.tab-container div.tab{
  min-width: 150px;
  width: auto;
  height: 25px;
  background-color:#3DCCF0;
  display:block;
  float:left;
  padding: 15px 10px 10px 20px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12px;
  color: #fff;
  font-weight:bold;
}
div.tab-content div[class^="tab-"]{
  display: none;
  width: auto;
  height: 100%;
  float: left;
  background-color: inherit;
  margin-top: 30px;
  background-color: #FFF;
}

div.tab-content div[class^="tab-"].active{
  display:block;
}

$(document).ready(function(){
  $('div.tab').click(function(){
    var tab_id      = $(this).attr('id');
    var clickedTab  = $(this);

    $('.tab').removeClass('active');
    $('.' + tab_id).removeClass('active');

    $(this).addClass('active');
    $('.' + tab_id).addClass( 'active' );

  });
});