JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- the svg: -->
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="lnr-heart-pulse" viewBox="0 0 1024 1024">
      <title>heart-pulse</title>
      <path class="path1" d="M486.4 972.8c-4.283 0-8.566-1.074-12.432-3.222-5.954-3.307-147.285-82.464-274.914-208.987-10.040-9.954-10.11-26.163-0.157-36.203s26.163-10.11 36.203-0.157c101.349 100.472 214.307 171.323 251.293 193.35 37-22.054 150.123-93.045 251.304-193.352 10.042-9.952 26.248-9.882 36.205 0.158 9.954 10.040 9.883 26.25-0.158 36.205-127.629 126.52-268.958 205.678-274.912 208.986-3.866 2.149-8.149 3.222-12.432 3.222z"></path>
      <path class="path2" d="M65.478 563.216c-9.61 0-18.821-5.437-23.182-14.709-28.066-59.659-42.296-119.314-42.296-177.307 0-148.218 120.582-268.8 268.8-268.8 50.173 0 103.461 18.805 150.051 52.952 27.251 19.973 50.442 44.043 67.549 69.606 17.107-25.565 40.299-49.634 67.55-69.606 46.589-34.147 99.878-52.952 150.050-52.952 148.218 0 268.8 120.582 268.8 268.8 0 57.992-14.23 117.645-42.294 177.301-6.018 12.794-21.267 18.29-34.061 12.267-12.794-6.018-18.286-21.267-12.269-34.061 24.834-52.786 37.424-105.107 37.424-155.507 0-119.986-97.616-217.6-217.6-217.6-87.187 0-171.856 71.725-193.314 136.096-3.485 10.453-13.267 17.504-24.286 17.504s-20.802-7.051-24.286-17.504c-21.456-64.371-106.125-136.096-193.314-136.096-119.986 0-217.6 97.614-217.6 217.6 0 50.4 12.592 102.723 37.426 155.512 6.019 12.794 0.526 28.043-12.267 34.061-3.522 1.659-7.23 2.443-10.88 2.443z"></path>
      <path class="path3" d="M538.346 768.024c-0.232 0-0.456-0.002-0.678-0.006-10.35-0.218-29.122-5.598-38.552-39.194l-62.291-221.915-41.328 167.894c-8.106 32.933-26.902 39.813-37.387 40.982-10.483 1.173-30.334-1.397-45.504-31.733l-31.005-62.010c-1.475-2.952-2.85-4.834-3.893-6-0.171 0.229-0.355 0.483-0.546 0.765-18.939 27.816-61.053...

CSS

@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700';
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-backfase-visibility: hidden;
}

html {
  background-color: #fff;
  height: 100%;
  width: 100%;
  font-size: 1.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: #444;
  height: 100%;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  line-height: 1.65em;
}

pre {
  white-space: inherit;
}

.container {
  padding: 100px;
}

.w50 {
  float: left;
  width: 50%;
}

.card {
  position: relative;
  background-color: #eee;
  margin: auto;
  padding: 20px;
  width: 240px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .12);
  transition: 2s padding-top cubic-bezier(.4, 0, .2, 1), 2s -webkit-transform cubic-bezier(.4, 0, .2, 1), 2s transform cubic-bezier(.4, 0, .2, 1);
}

.card.flipped {
  padding-top: 3.5em;
}
.card.transform.flipped {
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
}

.card .icon {
  display: -webkit-flex;
  display: flex;
  position: absolute;
  background-color: #fff;
  padding: 10px;
  left: 50%;
  top: 0;
  opacity: 1;
  border: 2px solid #444;
  border-radius: 100%;
  z-index: -1;
  -webkit-transform: translate(-50%, -25%) rotateX(-180deg);
  transform: translate(-50%, -25%) rotateX(-180deg);
  transition: 2s padding cubic-bezier(.4, 0, .2, 1), 2s opacity cubic-bezier(.4, 0, .2, 1), 2s webkit-transform cubic-bezier(.4, 0, .2, 1), 2s transform cubic-bezier(.4, 0, .2, 1);
}

.card.flipped .icon {
  padding: 20px;
  z-index: 1;
}

.card .icon svg {
  fill: #444;
  height: 24px;
  width: 24px;
  transition: 2s height cubic-bezier(.4, 0, .2, 1), 2s width cubic-bezier(.4, 0, .2, 1);
}

.card.flipped .icon svg {
  height: 50px;
  width: 50px;
}

.card .title {
  display:...

JavaScript

var flipping = false;

$('.card').on('click touch', function() {
  if (!flipping) {
    flipping = true;
    $(this).toggleClass('flipped');
    if ($(this).hasClass('flipped')) {
      $('.icon', this).css('animation', 'frontFlip 2s ease-in-out forwards');
    } else {
      $('.icon', this).css('animation', 'backFlip 2s ease-in-out forwards');
    }
    setTimeout(function() {
      flipping = false;
    }, 2000);
  }
});