JSFiddle - React, Tailwind, and code Playground

by coreysnyder

HTML

<ul data-bind="foreach: cards" class="gridWrapper">
    <li class="flip-container notPositioned">
        <div class="flip-card">
            <div class="front face">FRONT</div>
            <div class="back face">BACK</div>
        </div>
    </li>
</ul>

CSS

/***** 3d CSS courtesy of https://www.webkit.org/blog/386/3d-transforms/ ***********/
 @media all and (-webkit-transform-3d) {
    /* Use the media query to determine if 3D transforms are supported */
    .flip-container {
        -webkit-perspective: 1000;
        display: inline-block;
        top: -300px;
        left: 500px;
    }
    .flip-card {
        width: 175px;
        height: 175px;
        margin: 10px 10px 0 0;
        -webkit-transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 1s;
        animation:myship 10s;
        -moz-animation:myship 10s;
        /* Firefox */
        -webkit-animation:myship 10s;
        /* Safari and Chrome */
        cursor: pointer;
    }
    .flip-container:hover .flip-card {
        -webkit-transform: rotateY(180deg);
    }
    .flip-card img {
        border-radius: 8px;
    }
    .face {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        -webkit-backface-visibility: hidden;
        background-color: rgb(44, 110, 155);
        border-radius: 8px;
        box-shadow: 5px 4px 8px rgb(151, 151, 151);
        font: 30px'ChunkFiveRegular';
        color: #fff;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    }
    .face.back {
        display: block;
        -webkit-transform: rotateY(180deg);
        -webkit-box-sizing: border-box;
        color: white;
        -webkit-border-radius: 10px;
    }
}