JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

HTML

<p>X Tag Demo using Platform.js polyfill</p>
<button id='flipbutton'>Flip</button>
<x-flipbox id='myFlip' class='myFlip'>
    <div>I'm the front face.(Click Here)</div>
    <div>& I'm the back face.(Click Here)</div>
</x-flipbox>

CSS

.myFlip {
    width: 300px;
    padding: 20px;
    height: 100px;
    background-color: #339;
}
.myFlip div {
    padding: 20px;
    color: #ffffff;
}
.myFlip div:last-child {
    color: yellow
}

JavaScript

$("#flipbutton").click(function(){
    $("#myFlip").get(0).toggle();
})

$("#myFlip").click(function(){
    this.toggle();
})