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="front"> 
<p>Front</p>
<p>Lorem ipsum dolor sit amet. Ut non quam in nisi molestie vulputate. Etiam ornare est in ipsum elementum, nec sodales lacus congue.  <img src="https://dummyimage.com/mediumrectangle/222222/eeeeee" class="img-responsive img-rounded width-200 center-block" /><strong>Praesent non tristique arcu.</strong> Sed a viverra nulla. Nunc vehicula orci risus, a pellentesque metus hendrerit a. Duis at lorem tortor </p>

</div> 
<div class="back">
<p>Back</p>
<p>Lorem ipsum dolor sit amet. Ut non quam in nisi molestie vulputate. Etiam ornare est in ipsum elementum, nec sodales lacus congue.
<strong>Praesent non tristique arcu.</strong> Sed a viverra nulla. Nunc vehicula orci risus, a pellentesque metus hendrerit a. Duis at lorem tortor. </p>
</div>

<div class="click-me read-less-cards"></div>
</div>



     
     
<div class="card"> 
<div class="front"> 
<p>Front</p>
<p>Lorem ipsum dolor sit amet. Ut non quam in nisi molestie vulputate. </p>
</div> 

<div class="back">
<p>Back</p>
<p>Lorem ipsum dolor sit amet. Ut non quam in nisi molestie vulputate. Etiam ornare est in ipsum elementum, nec sodales lacus congue. <strong>Praesent non tristique arcu.</strong> Sed a viverra nulla. Nunc vehicula orci risus, a pellentesque metus hendrerit a. Duis at lorem tortor. </p>
</div> 


<div class="click-me read-less-cards"></div>
</div>







<div class="card">
<div class="front">
<p>Front</p>
<p>Lorem ipsum dolor sit amet. Ut non quam in nisi molestie vulputate. Etiam ornare est in ipsum elementum, nec sodales lacus congue. <strong>Praesent non tristique arcu.</strong> Sed a viverra nulla. Nunc vehicula orci risus, a pellentesque metus hendrerit a. Duis at lorem tortor. </p>
</div>


<div class="back">
<p>
Lorem ipsum dolor sit amet. Ut non quam in nisi molestie...

CSS

.card {
position: relative;
display: flex;
width: 100%;
float: left;
pointer-events: none;
}

.card-change-color {
background: white!important;
color: black!important;
}


.card .front, .card .back {
  padding: 40px;
  height: auto!important;
  position: relative!important;
  border-radius: 20px;
  box-shadow: 4px 4px 16px 4px #ccc;
}


.card .front {
  margin-right: -100%;
  background-color: rgba(0, 0, 0, 1);
  color: white;
}

.card .back{
  background-color: rgba(255, 255, 255, 1);
  color: black;
}








.click-me {
   cursor: pointer;
   float: right;
   position: absolute!important;
   bottom: 20px;
   right: 20px;
   margin-bottom: 20px;
   opacity: 1;
   z-index: 99999;
   pointer-events: auto;
}

.click-me:hover {
  opacity: 0.6;
  transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -webkit-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
}

.click-me:before {
   content: "-";
   color: white;
   background-color: black;
   font-size: 40px;
   border-radius: 50%;
   text-align: center;
   font-weight: bold;
   display: inline-block;
   width: 50px;
   height: 50px;
}

.read-less-cards:before {
   content: "+";
   color: black;
   background-color: white;
   font-size: 40px;
   border-radius: 50%;
   text-align: center;
   font-weight: bold;
   display: inline-block;
   width: 50px;
   height: 50px;
}

JavaScript

$(".card").flip({
  axis: "y",
  reverse: "true",
  trigger: "click",
  speed: "800",
  autoSize: "true"

});


$('.click-me').click(function() {
  $(this).toggleClass('read-less-cards').parent(".card").toggleClass("card-change-color");
});