JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://lab.smashup.it/lab/flip/js/jquery.flip.min.js"></script>
<div class='controls'>
    <a href='#' data-element="prvy">prvy slide</a>
    <a href='#' class='active' data-element="druhy">druhy slide</a>
    <a href='#' data-element="treti">treti slide</a>
</div>
<div class='content'>
    <div id="prvy"> Toto je obsah prveho slidu </div>
    <div id="druhy"> Aha druhy slide! </div>
    <div id="treti"> Posledny treti slide </div>
</div>
<div id='flipbox'>
    Toto je obsah prveho slidu
</div>

CSS

.controls a{
    display: none;
}
.controls a.active{
    display: block;
}
#flipbox{
    width: 200px;
    height: 200px;
    background: red;
    color: white;
    line-height: 200px;
    font-family: "Myriad Pro";
    font-weight: bold;
    text-align: center;
}
.content{
    display: none;
}

JavaScript

$(function () {
	    $(".controls a:not(.revert)").bind("click", function () {
	        var $this = $(this);
	        $("#flipbox").flip({
	            content: $("#" + $this.data('element')), 
                color: 'red',
                direction:'tb',
	            onBefore: function () {
                    $this.removeClass('active');
                    if($this.next().length){
                        $this.next().addClass('active');
                    }
                    else{
                $this.parent().find('a:first-child').addClass('active');
                    }
	            }
	        })
	        return false;
	    });

	});