JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flipbox"> <a href="#" rel="rl" data-element="druhy">Druhy</a>

</div>
<div id="prvni"> <a href="#" rel="rl" data-element="druhy">Druhy</a>

</div>
<div id="druhy"> <a href="#" rel="rl" data-element="treti">Treti</a>

</div>
<div id="treti"> <a href="#" rel="rl" data-element="prvni">Prvni</a>

</div>

CSS

#prvni, #druhy, #treti {
    display: none;
}

JavaScript

$(function () {
	    $(".flipPad a:not(.revert)").bind("click", function () {
	        var $this = $(this);
	        $("#flipbox").flip({
	            direction: $this.attr("rel"),
	            color: $this.attr("rev"),
	            content: $("#" + $this.data('element')).html(), //(new Date()).getTime(),
	            onBefore: function () {
	                $(".revert").show()
	            }
	        })
	        return false;
	    });

	    $(".revert").bind("click", function () {
	        $(".flipbox").revertFlip();
	        return false;
	    });
	});