JSFiddle - React, Tailwind, and code Playground

by blowsie

HTML

<span class="rollover"> 
          <div class="front"></div>
          <div class="back"></div>
</span>

CSS

* {margin:0; padding:0}

/*
  3D rollovers styles
  Homepage: http://github.com/codepo8/3Drollovers
  Copyright (c) 2011 Christian Heilmann
  Code licensed under the BSD License:
  http://wait-till-i.com/license.txt
*/

.front {
  position: absolute;
  background: blue;
  top: 0;
  right:0;
  bottom:0;
  left:0;   
       transition: all 1s ease-in-out;
       -webkit-transition: all 1s ease-in-out;


}
.back {
  position: absolute;
  background: red;
  top: 0;
  right:100%;
  bottom:0;
  left:-100%;  
       transition: all 1s ease-in-out;
       -webkit-transition: all 500ms ease-in-out;


}
.rollover.flipped .back {
  right:0;
    left:0;
}
.rollover.flipped .front {

}
.rollover {
      position: relative;
  width: 400px;
  height: 200px;
  display: block;
    background:#ccc;
    margin:50px;
}

JavaScript

$("body").click(function() {
    $(".rollover").toggleClass('flipped');
})