JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<script src="https://raw.github.com/roncioso/Flip-jQuery/master/jquery.flip.js"></script>
<link rel="stylesheet" href="https://raw.github.com/addyosmani/jquery-ui-bootstrap/master/css/demo.css">
<div class="main">
<div id="front" class="hero-unit span6">
i am from content
<button id="btnSettings">settings</button>
<div>
<div>

CSS

div#front{
background:#eee;
width:200px;
height:200px;    
}

.main{
padding-left:100px;
padding-top:50px;        
}

JavaScript

$("#btnSettings").click(function() {
    $("#front").flip({
        direction: 'lr',
        content: 'i am rear content<button class="revertBtn">revert</button>',
        color: "#eee",
        onEnd: function() {
            $(".revertBtn").click(function() {
                $("#front").revertFlip();
            });
        }
    });
});