JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>

<div class="card-1 card" style="perspective: 1200px; position: relative;">
      <div class="other-front" style="background-color: grey; -webkit-backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.25s ease-out; transform: rotateY(0deg);">
          Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
          Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
      
          Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
      
          Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
      
          Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
      
          Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
      
          Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
      
          Front: Cursus aliquet mus...

CSS

.back, .other-back {
        background-color: red;
      }

JavaScript

$(function(){
      $(".card-1").flip({
        axis: "y", // y or x
        reverse: false, // true and false
        trigger: "hover", // click or hover
        speed: '250',
        front: $('.other-front'),
        back: $('.other-back'),
        autoSize: true
      });
      $("#card-2").flip({
        axis: "x",
        reverse: true,
        trigger: "click"
      });
    });