JSFiddle - React, Tailwind, and code Playground

by Alex Incarnati

HTML

<div class="row">
    <div class="container">
      <div id="card">
        <div class="front">
            <img src="http://lorempixel.com/250/300/sports/" />
        </div>
        <div class="back">
            <form>
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                  <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label><br />
                <label>name<input type="text"  /></label>
            </form>
        </div>
      </div>
    </div>
</div>
<button id="btnSwap">Swap Div</button>

CSS

.row {
    width:250px;    
}
.container { 
    width:100%;
    height:100%;  
    border:1px solid black;
}

#card {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
  -webkit-transform-origin: right center;
}

#card div {
  display: block;
  position: absolute;
  width: 100%;
  height: 300px;
  -webkit-backface-visibility: hidden;

}

#card .front {
  
}

#card .back {
   -webkit-transform: rotateY(180deg);
    backface-visibility: hidden;
}
#card .back {
   overflow-y:scroll;   
   width: 100%;
   height: 300px;   
   position:absolute;  
}



#card.flipped {
  -webkit-transform: translateX(-100%) rotateY(-180deg);
}

button{position:relative; top:300px;}

JavaScript

$('#btnSwap').on('click',function(){
    $('#card').toggleClass("flipped");
});