JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

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


<div class="card">


  <div class="my-front-card">
    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.
  </div>
  
      
  <div class="my-back-card">
  <a href="http://google.com">link</a>
  Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
  </div> 
      
      
  <div onclick="ChangeText()"  class="click-me">+</div>
   
   
</div>












<div class="card">


  <div class="my-front-card">
    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.
  </div>
  
      
  <div class="my-back-card">
  <a href="http://google.com">link</a>
  Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
  </div> 
      
      
  <div onclick="ChangeText()"  class="click-me">+</div>
   
   
</div>

CSS

.card {
max-width: 100px;
min-height: 60px;
padding: 40px 40px 20px 40px;
border-radius: 20px;
background: grey;
float: left;
margin: 20px;
}
      
.my-front-card, .my-back-card {
max-width: 100px;
min-height: 60px;
}
      
.click-me {
cursor: pointer;
text-align: right;
position: absolute;
bottom: 0px;
font-size: 40px;
font-weight: bold;
}

JavaScript

$(function() {
  $(".click-me").each(function() {
    $(this).flip({
      axis: "y",
      reverse: true,
      trigger: "click",
      speed: '800',
      front: $(this).siblings('.my-front-card'),
      back: $(this).siblings('.my-back-card'),
      autoSize: false
    });
  });
});


$(".click-me").click(function() {
  $(this).html($(".click-me").html() == '+' ? '-' : '+');
});