JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://lab.smashup.it/lab/flip/js/jquery.flip.min.js"></script>
<div id="fb1" class='flipbox'>flippy 1</div>
<div id="fb2" class='flipbox'>flippy 2</div>
<div id="fb3" class='flipbox'>flippy 3</div>

<div style="display:none;">
    <div id="fb1b">back of flippy 1</div>
    <div id="fb2b">back of flippy 2</div>
    <div id="fb3b">back of flippy 3</div>    
    
<div>

CSS

.flipbox {
  background-color: #ff9000;
  font-family: 'ChunkFive Regular', Tahoma, Helvetica;
  font-size: 17px;
  color: #ffffff;
  text-align: center;
  padding: 10px;
}

JavaScript

$(document).ready(function() {
    $('.flipbox').click(function() {
        if($(this).hasClass('flipped')) {
            $(this).revertFlip();
            $(this).removeClass('flipped');
        } else {
            
            var id = $(this).attr('id') + 'b';
            $(this).flip({direction: 'tb', content: $('#'+id).html() });
            $(this).addClass('flipped');              



        }
    });            
});