JSFiddle - React, Tailwind, and code Playground

by Francisco Maria Calisto

HTML

<div class="cci-press-card__wrap"><div class="cci-press-card card--front"><header class="press-card__header"></header><section class="press-card__content"><div class="journalist-name animated fadeInLeft" data-journalist-name="Lasse Chor"></div><span class="journalist-title">Happiest Man Alive</span></section><footer class="press-card__footer"><h4>Lasse's Latest Articles</h4><div class="article-link">Why Startups Succeed</div><div class="article-link">PCI's Next Big Opportunity</div><div id="flipTrigger">Tap to view Lasse's Instagram <span class="triggerImage">➜</span></div></footer></div><div class="cci-press-card card--back"><iframe src="http://snapwidget.com/in/?h=c3RhcnR1cHN8aW58NzV8NHw0fHxub3wwfG5vbmV8b25TdGFydA==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:300px; height: 300px" ></iframe><div class="padded" id="flipTrigger"><span class="triggerImage"></span>Tap here to go back </div></div></div>

CSS

/* === CCI Journalist Press Card === */
* {
  position: relative;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  background: #ecf0f1;
  margin: 0 auto;
  font-size: 1.6rem;
  width: 72rem;
  padding-top: 4rem;
}
h4 {
  margin-bottom: 1rem;
}
.cci-press-card__wrap {
  position: relative;
  width: 300px;
  height: 380px;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}
.card--front {
  z-index: 10;
}
.card--back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
  top: 0;
  overflow: hidden;
}
.padded {
  padding: 0 2rem;
  font-size: 2.3rem;
  text-align: center;
}
.cci-press-card {
  width: 30rem;
  height: 38rem;
  margin: 0 auto;
  font-family: "Lucida Grande", sans-serif;
  background: #3498db;
  border-radius: 8px;
  border-bottom: 3px solid #2980b9;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cci-press-card .press-card__header {
  height: 6rem;
  padding: 2rem;
  font-size: 2rem;
  color: ghostwhite;
  line-height: 1;
  font-weight: 700;
}
.cci-press-card .press-card__header:before {
  content: "Journalist";
}
.cci-press-card .press-card__header:after {
  content: "Press Card";
  color: #2980b9;
  float: right;
}
.cci-press-card .press-card__content {
  height: 16rem;
  padding: 2rem;
  font-size: 2rem;
  background: white url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/16584/swb_foto_lasse.jpg') no-repeat;
  background-position-x: 125px;
  background-size: contain;
  transition: background-position-x 1s ease-out;
  animation: moveRight 0.32s ease-in-out forwards;
}
.cci-press-card .press-card__content .journalist-name:before {
  content: attr(data-journalist-name) "\A\A";
  color: black;
  width: 100%;
  clear: both;
  display: block;
  font-weight: 700;
}
.cci-press-card...

JavaScript

/* === CCI Journalist Flip Card === */
document.ontouchmove = function(event) {
  event.preventDefault();
}

$(document).ready(function() {
  $('.cci-press-card__wrap').on("click", function() {
    $(this).toggleClass('rotate-3d');
    $('.card--back').toggleClass('z-up');
  })
})