JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<section id="services" class="section-bg">
     <div class="container-fluid">

       <header class="section-header2">
         <h3>Prices / Booking</h3>

       </header>

       <div class="row">

         <div class="col-md-6 col-lg-3 wow bounceInUp" data-wow-duration="1.4s">
           <div class="box">
             <div class="scene">
               <div class="card">
                 <div class="card__face--front">
                   <h4 class="title"><a href="">IcePub</a></h4>
                   <i class="description">8 hr | Click for Pricing</i>
                   <p class="description">&nbsp;</p>
                   <p class="description">Grab your fishing buddy and make your way over to the Ice pub for a day's worth of ice fishing. If your
                     buddy can't make it and...</p>
                 </div>

                 <div class="card__face card__face--back">The back - pricing for IcePub goes here...</div>

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


         <div class="col-md-6 col-lg-3 wow bounceInUp" data-wow-duration="1.4s">
           <div class="box">
             <div class="scene">
               <div class="card">
                 <div class="card__face--front">
                   <h4 class="title"><a href="">IcePub</a></h4>
                   <i class="description">8 hr | Click for Pricing</i>
                   <p class="description">&nbsp;</p>
                   <p class="description">Grab your fishing buddy and make your way over to the Ice pub for a day's worth of ice fishing. If your
                     buddy can't make it and...</p>
                 </div>

                 <div class="card__face card__face--back">The back - pricing for IcePub goes here...</div>

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


       </div>
     </div>
   </section><!-- #services -->

CSS

.scene {
  margin: 40px 0;
  perspective: 600px;
}

.card {
  border: none;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  /* line-height: 260px; */
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: black;
}

.card__face--back {
  /* background: blue; */
  background: black;
  transform: rotateY(180deg);
}

JavaScript

var slice = Array.prototype.slice;
var cards = slice.call(document.querySelectorAll('.card'));

cards.forEach(function(card) {
  card.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  });
});