JSFiddle - React, Tailwind, and code Playground

HTML

<div class='span12'>
                <div class='equipment-card'>
                    <div class='card-front card-face'>
                        front
                    </div>
                    <div class='card-back card-face'>
                        back
                    </div>
                </div>
                <div class='equipment-card'>
                <div class='card-front card-face'>
                        front
                    </div>
                    <div class='card-back card-face'>
                        back
                    </div>
                </div>
                <div class='equipment-card'>
                <div class='card-front card-face'>
                        front
                    </div>
                    <div class='card-back card-face'>
                        back
                    </div>
                </div>
                <div class='equipment-card'>
                <div class='card-front card-face'>
                        front
                    </div>
                    <div class='card-back card-face'>
                        back
                    </div>
                </div>
                <div class='equipment-card'>
                
                </div>
            </div>

CSS

.equipment-card-holder{
    -webkit-perspective: 1000;
    }

.equipment-card{
    height: 250px;
    width: 222px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.9);
    float: left;
    margin: 0 9px 30px;  

    -webkit-transform-style: preserve-3d;
  

    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; 
    }
    
    .equipment-card .card-face{
        -webkit-backface-visibility: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        }

    .equipment-card .card-front{
        -webkit-transform: rotateY(0deg);
        }

    .equipment-card .card-back{
        -webkit-transform: rotateY(180deg);
        background-color: lightBlue;
        }
        
    .equipment-card.flipped{
        -webkit-transform: rotateY(180deg);
        box-shadow: 0 15px 50px rgba(0,0,0,0.2);
        
        }

.span12{
    
    width: 960px;
}
}

JavaScript

$(function(){
        $('.equipment-card').click(function(){
            $(this).toggleClass('flipped');
        
        });
    
    
    });