JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<ul>
    <li class="v">1</li>
    <li class="v">2</li>
    <li class="c">3</li>
    <li class="c">4</li>
</ul>

<div id="block1">BLOCK1</div>
<div id="block2">BLOCK2</div>

CSS

div{width:150px; height: 50px; background:#e6e6e6;display:none;color:#fff;}
.active{background:#666666;}

JavaScript

$('ul li.v').click(function(){
    $('ul li').removeClass('active');
    $(this).addClass('active')
    $('#block1').fadeIn(1000);
    $('#block2').fadeOut(1000);
})
$('ul li.c').click(function(){
    $('ul li').removeClass('active');
    $(this).addClass('active')
    $('#block2').fadeIn(1000);
    $('#block1').fadeOut(1000);
})