JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mask">
    <div class="mask-wrapper">
        <div class="front">
            <img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/150192_428761443814459_941607402_n.jpg" />
        </div>
        <div class="back">
            <ul>
                <li>Sachin Tendulkar</li>
                <li>Cricketer</li>
            </ul>
        </div>
    </div>
</div>

CSS

/*Reset Start*/
 html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*Reset Ends*/

/*
*
*
*
*/
 .mask {
    width: 11.4em;
    height: 11.4em;
    border-radius: 10.4em;
    overflow: hidden;
    position: relative;
    display: block;
    animation: test 2s ease-in-out;
}
.mask img {
    width: 10.4em;
    position: absolute;
    border: 0.2em solid #A22B3A;
    border-radius: 10.4em;
}
.mask {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
/* flip the pane when hovered */
 .mask:hover .mask-wrapper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
/* flip speed goes here */
 .mask-wrapper {
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    transition: 0.6s;
    
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
   ...