JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="active item" id="id1">
            <img src="http://placehold.it/300x200/888&text=Item 1" />
        </div>
        <div class="item" id="id2">
            <img src="http://placehold.it/300x200/aaa&text=Item 2" />
        </div>
        <div class="item" id="id3">
            <img src="http://placehold.it/300x200/444&text=Item 3" />
        </div>     
    </div>

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>  


    <div class="container">
        <ul>
            <li style="display:inline-block;"><a href="javascript:slideTo('0')" class="id id1 blue">Dashobard</a></li>
            <li style="display:inline-block;"><a href="javascript: slideTo('1')" class="id id2 gray">Timeline</a></li>
            <li style="display:inline-block;"><a href="javascript: slideTo('2')" class="id id3 gray">Visionboard</a></li>                                       </ul>
   </div>

<br>

<div align="center">
    <p class="id1caption caption">This is Dashboard</p>
    <p class="id2caption caption" style="display: none;">This is Timeline</p>
    <p class="id3caption caption" style="display: none;">This is VisionBoard</p>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');

#myCarousel {
  margin-top: 40px;
}

.carousel-linked-nav,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
}

.container {
    text-align: center;
}

ul {margin: 0;}

ul li {vertical-align: top;width: 70px;}

.gray {
    color: gray;
}

.blue {
    color: blue;
}

JavaScript

function slideTo(valoare){
    if (valoare == 0) $('#myCarousel').carousel(0)
    if (valoare == 1) $('#myCarousel').carousel(1)
    if (valoare == 2) $('#myCarousel').carousel(2)    
}

$( document ).ready(function() {
    $('#myCarousel').on('slid.bs.carousel', function () {          
        $('.id').removeClass('blue');        
        $('.id').addClass('gray');
        $('.'+$(this).find('.active').attr('id')).addClass('blue');     
        
        $('.caption').hide();
        $('.'+$(this).find('.active').attr('id')+'caption').show();
    })
});