JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="section">
<ul class="tabs">
<li class="current">A</li>
<li>B</li>
<li class="l">C</li>

</ul>

<div class="box visible"><img src="http://www.i-love-cats.com/software/Adorable-Cats-Screensaver.jpg"></div>
<div class="box"><img src="http://www.google.fr/logos/2011/pierre_de_fermat-2011-hp.jpg"></div>
<div class="box"><img src="http://images.easyart.com/i/prints/rw/lg/7/2/Maxi-Posters-Wild-Cats-72032.jpg"></div>

</div>
</body>

CSS

* {
margin:0;
padding:0;

}



.section {
width:727px;
background-color:#A8d08d;


}

ul.tabs {
list-style:none;
height:32px;
line-height:29px;
border-bottom:1px solid #DDD;
background:#fff;
display:table;
width:100%;    
border-spacing: 2px 0px;     
}

.tabs li{

display:table-cell;
margin: 0 3px 0 0;
padding: 0 7px 5px;
color:#2a2a2a;
cursor:pointer;
background:#dedede;
border:
border-bottom:
position:relative;
font-family: Arial, Verdana, sans-serif;
font-size:18px;
}

.tabs li.current {
border:
border-bottom: 1px solid a8d08d;
background:#c4e0b0;
color:#2a2a2a;
padding:

}

.box {
display:none;
background-color:#A8d08d;
padding: 0 12px;


}

.box.visible {
display: block;

}


li.l {
margin-right:0px;
padding-right:16px;
}

JavaScript

(function($) {
$(function() {

  $('ul.tabs').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current')
          .parents('div.section').find('div.box').hide().end().find('div.box:eq('+i+')').fadeIn(150);
      });
    });
  });

})
})(jQuery)