JSFiddle - React, Tailwind, and code Playground

by DugSohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.1/cerulean/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12 bioCard">
      <div class="card">
        <div class="content card-body">
          <div class="Front">
          <div  style="background-image:url('https://img.grouponcdn.com/iam/2Fy7hepveWbTD75HRHj8XwPawdd3/2F-2048x1229/v1/c870x524.webp')" class="card-img-top" alt="..."></div>
  

            <h2 class="text-primary card-title">First Last-name, deg.</h2>
            <div class="email">
              [email protected]
            </div>
            <div class="card-text">
              Pellentesque auctor felis a tellus finibus pellentesque. Vestibulum eget egestas mi, sed sodales enim. Nunc elementum diam nec justo accumsan porta. Donec faucibus purus quis augue efficitur, vel tempor mauris viverra. Suspendisse rutrum ipsum sit amet lacus tempus efficitur. Donec at erat vel ligula tincidunt iaculis.
            </div>
            <button type="button" class="btn btn-block btn-link info">
              <i class="fa fa-calendar"></i> Speaker Schedule
              <i class="fa fa-chevron-right"></i>
            </button>


            <div class=" card-footer bg-warning">
              <div class="col">

                <a class="fa fa-fw fa-facebook"></a>
                <a class="fa fa-fw fa-twitter"></a>
                <a class="fa fa-fw fa-linkedin"></a>
              </div>
            </div>
            <div class="row buttons">
              <div class="col-xs-8 col-xs-offset-2">

              </div>
            </div>
          </div>
        ...

SCSS

@import url(//fonts.googleapis.com/css?family=Oswald:400);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
$primary: rgba(254, 162, 32, 1) !default;
$secondary: rgba(46, 177, 52, 1) !default;

body {
  background-color: rgba(255, 255, 255, 1);
  font-family: "Open Sans", sans-serif;
  margin:50px
}

.p-o {
  padding-bottom: 0;
}
.Front .card-img-top {
  height:185px;
  width:auto;
  background-position: center top;
  background-size:cover;
  background-color: #ccc;
  background-repeat:no-repeat;
}

.card {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  width: 325px;
  height: 505px;
  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);
  }
  .card-text {
    font-size:12px;
    margin-top:10px;
    padding: 0 20px;
    text-align: justify;
  }
  .card-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  
  
  .content .Select {
    /* Half way through the card flip, rotate...

JavaScript

$('.info').on( "click", function( event ) {
$( event.target ).closest('.card').toggleClass('applyflip');
  ('.btn-select').removeClass('disabled');

}.bind(this));

$('.btn-back').on( "click", function( event ) {
$( event.target ).closest('.card').toggleClass('applyflip');
  $('.btn-select').removeClass('disabled');
}.bind(this));

$('.btn-final').click(function() {
  $('.Select_confirm').toggleClass('reveal');
  $('.card').removeClass('applyflip');
  $('.registerConfirm').show();
  $('.btn-select').addClass('disabled');
}.bind(this));

$('.btn-cancel').on( "click", function( event ) {
$( event.target ).closest('.card').find('.Select_confirm').toggleClass('reveal');
}.bind(this));


$('.btn-select').on( "click", function( event ) {
$( event.target ).closest('.card').find('.Select_confirm').toggleClass('reveal');
});