JSFiddle - React, Tailwind, and code Playground

by Volker_E

HTML

<div class='wedding_party_row'>
        <div class='wedding_party_row_contents'>
            <div class='wedding_party_header'>
                The Officiant
            </div>
            <div class='wedding_party_member'>
               <div class="flip-container" ontouchstart="this.classList.toggle('onmouseover');">
                <div class="flipper">
                    <div class="front">
                        <div class="party_image"><img alt="Front Image alternative text" /></div><!-- Volker_E: always include an alt attribute for img element -->
                    </div>
                    <div class="back">
                        <div class="party_text_container">

                            <div class="party_text">Back Blah blah</div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
    </div>
</div>

CSS

/* entire container, keeps perspective */
.flip-container {
    margin: 20px 26px 32px 26px; /* customized rule */
    -webkit-perspective: 1000;
       -moz-perspective: 1000;
            perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, 
.flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.flip-container, 
.front, 
.back {
    /*width: 320px;
    height: 480px;*/
    width: 240px; /* customized rule */
    height: 240px; /* customized rule */
}

/* flip speed goes here */
.flipper {
    -webkit-transition: 0.6s;
       -moz-transition: 0.6s;
            transition: 0.6s;
    -webkit-transform: perspective(1000px);
       -moz-transform: perspective(1000px);
            transform: perspective(1000px);
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, 
.back {
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
    margin: 10px 0 10px 0;
    -webkit-box-shadow:
    0px 0px 0px 2px rgba(0,0,0,0.6),
    0px 0px 0px 14px #fff,
    0px 0px 0px 18px rgba(0,0,0,0.2),
    6px 6px 8px 17px #555;

    -moz-box-shadow:
    0px 0px 0px 2px rgba(0,0,0,0.6),
    0px 0px 0px 14px #fff,
    0px 0px 0px 18px rgba(0,0,0,0.2),
    6px 6px 8px 17px #555;
    /*! Volker_E Don't include -moz-box-shadow any more if you don't explicitely want to support Fx 3.6, see https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */

    box-shadow:
    0px 0px 0px 2px rgba(0,0,0,0.6),
    0px 0px 0px 14px #fff,
    0px 0px 0px 18px rgba(0,0,0,0.2),
    6px 6px 8px 17px #555;
    /*! Volker_E: get rid of the unit when values are '0'. So '0' instead of '0px'. */
}

/* front pane, placed...