JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="plan">
  <div class="content">
    <div class="planFront">
      <div class="planConfirm" style="display:none">
        <h4>
    Pending
    </h4>
      </div>
      <h2>Gexa Preferred Lyric 24</h2>
      <div class="rate">
        12.4<sup>&cent;</sup> <small>per kWh</small>
      </div>
      <div class="details">
        <p class="usage">
          at 2000 kWh
          <br/>
          <i class="fa fa-lock"></i> For 24 Months
        </p>
      </div>
      <h4 class="plan-info">
      WHAT'S IN THE PLAN ? 
      </h4>
      <div class="row buttons">
        <div class="col-xs-8 col-xs-offset-2">
          <button type="button" class="btn btn-block btn-success btn-select">
            SELECT PLAN <i class="fa fa-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="planMore">
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        What's Included</a>
      </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body"><sup>†</sup> HoneyWell Lyric Round<sup>&trade;</sup> smart thermostat.</div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Plan Documents</a>
      </h4>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div...

SCSS

@import url(//fonts.googleapis.com/css?family=Oswald:400);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
$account-base: rgba(6,
81,
128,
1.0) !default;
$plans-base: rgba(254,
162,
32,
1.0) !default;
$payment-base: rgba(46,
177,
52,
1.0) !default;
$control-base: rgba(27,
141,
205,
1.0) !default;
$footer-base: rgba(231,
231,
231,
1.0) !default;
$dark-base: rgba(10,
10,
10,
1.0) !default;
$highlight-row: rgba(241,
240,
207,
0.8) !default;
body {
  background-color: rgb(235, 232, 189);
  font-family: "Open Sans";
}

.p-o {
  padding-bottom: 0;
}

.plan {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  margin: 80px 150px;
  width: 325px;
  height: 375px;
  vertical-align: top;
  position: absolute;
  display: block;
  .content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
  }
  &.applyflip .content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
  }
  .content .planSelect {
    /* Half way through the card flip, rotate static content to 0 degrees */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
   ...

JavaScript

$('.plan-info').click(function() {
  $('.plan').toggleClass('applyflip');
  $('.btn-select').removeClass('disabled');

}.bind(this));

$('.btn-back').click(function() {
  $('.plan').toggleClass('applyflip');
  $('.btn-select').removeClass('disabled');
}.bind(this));

$('.btn-final').click(function() {
  $('.planSelect_confirm').toggleClass('reveal');
  $('.plan').removeClass('applyflip');
  $('.planConfirm').show();
  $('.btn-select').addClass('disabled');
}.bind(this));

$('.btn-cancel').click(function() {
  $('.planSelect_confirm').toggleClass('reveal');
}.bind(this));


$('.btn-select').click(function() {
  $('.planSelect_confirm').toggleClass('reveal');
}.bind(this));