JSFiddle - React, Tailwind, and code Playground

by kimmy314

HTML

<div class="clickContainer">
  <div class="clickcard cardsAM">
    <div class="front face" id="card01f">
      <b> blah blah blah  </b>
</div>
<div class="back face center" id="card01b">
  It as announcing it me stimulated frequently continuing. Least their she you now above going stand forth. He pretty future afraid should genius spirit on. Set property addition building put likewise get. Of will at sell well at as. Too want but tall nay like old. Removing yourself be in answered he. Consider occasion get improved him she eat. Letter by lively oh denote an. 

Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous comparison middletons at. Park we in lose like at no. An so to preferred convinced distrusts he determine. In musical me my placing clothes comfort pleased hearing. Any residence you satisfied and rapturous certainty two. Procured outweigh as outlived so so. On in bringing graceful proposal blessing of marriage outlived. Son rent face our loud near. 

Had denoting properly jointure you occasion directly raillery. In said to of poor full be post face snug. Introduced imprudence see say unpleasing devonshire acceptance son. Exeter longer wisdom gay nor design age. Am weather to entered norland no in showing service. Nor repeated speaking shy appetite. Excited it hastily an pasture it observe. Snug hand how dare here too.
</div>
</div>
</div>

<div class="clickContainer">
  <div class="clickcard cardsAM">
    <div class="front face" id="card01f">
      <b> blah blah  </b>
</div>
<div class="back face center" id="card01b">
  Advice me cousin an spring of needed. Tell use paid law ever yet new. Meant to learn of vexed if style allow he there. Tiled man stand tears ten joy there terms any widen. Procuring continued suspicion its ten. Pursuit brother are had fifteen distant has. Early had add equal china quiet visit. Appear an manner as no limits either praise in. In in written on charmed justice is amiable farther besides....

CSS

.clickContainer {
  position: relative;
  margin: 20px auto;
  width: 95%;
  perspective: 1000;
}

.clickcard {
  width: 100%;
  transform-style: preserve-3d;
  transition: .5s;
  cursor: pointer;
  border: solid 1em;
  border-color: transparent;
  border-radius: 0.5em;
}

.clickcard:hover {
  box-shadow: 0 0 1em black;
}

.clickcard.flipped {
  transform: rotateX(-180deg);
}

.clickcard .face {
  padding: 1em;
  backface-visibility: hidden;
}

.clickcard .front {
  background: #99ff99;
  display: block;
}

.clickcard.flipped .front {
  display:none;
}

.clickcard .back {
  background: #ccffcc;
  transform: rotateX(180deg);
  display:none;
}

.clickcard.flipped .back {
  display:block;
}

JavaScript

$('.clickcard').click(function(event) {
	$(this).toggleClass('flipped');
});