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">
<BR/>
<h5 class="text-center">
With Partner
</h5>
<div class="row">
  <div class="col-xs-6">
    <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...

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;
  overflow-y:auto;
      padding-bottom: 0;
    overflow-y: auto;
    max-height: 135px;
    padding-right: 20px;
  
}

.plan {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  margin: 20px;
  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...

JavaScript

$('.plan-info').click(function() {
  var $myPlan = $(this).closest('.plan');
  $myPlan.toggleClass('applyflip');
  $myPlan.find('.btn-select').removeClass('disabled');
});

$('.btn-back').click(function() {
  var $myPlan = $(this).closest('.plan');
  $myPlan.toggleClass('applyflip');
  $myPlan.find('.btn-select').removeClass('disabled');
});

$('.btn-final').click(function() {
  var $myPlan = $(this).closest('.plan');
  $myPlan.find('.planSelect_confirm').toggleClass('reveal');
  $myPlan.find('.plan').removeClass('applyflip');
  $('.planConfirm').hide();
  $('.btn-select').removeClass('disabled');
  $myPlan.find('.planConfirm').show();
  $myPlan.find('.btn-select').addClass('disabled');
});

$('.btn-cancel').click(function() {
  var $myPlan = $(this).closest('.plan');
  $myPlan.find('.planSelect_confirm').toggleClass('reveal');
});


$('.btn-select').click(function() {
  var $myPlan = $(this).closest('.plan');
  $myPlan.find('.planSelect_confirm').toggleClass('reveal');
});