JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flipBlock-container">
    <div class="flip">
        <div class="flipFrontface">
            <div class="faceContent">Game of Thrones receives funding from Northern Ireland Screen, a government agency financed by Invest NI and the European Regional Development Fund.[44] As of April 2013, Northern Ireland Screen has awarded the show £9.25 million and according to government estimates, benefited the Northern Ireland economy by £65 million.[45]</div>
        </div>
        <div class="flipBackface">Tourism organizations in other filming locations also reported notable increases in bookings after their locations appeared in Game of Thrones. Bookings through one web portal in 2012 increased by 13% in Iceland and by 28% in Dubrovnik, Croatia. In 2013, bookings increased by 100% in Ouarzazate, Morocco, where Daenerys's season 3 scenes were filmed.[47]</div>
    </div>
</div>

CSS

* {
    -webkit-text-stroke: rgba(255, 255, 255, 0.01) 0.1px;
    -webkit-text-shadow: rgba(255, 255, 255, 0.01) 0 0 1px;
    -webkit-text-stroke-width: 0.1px;
    -webkit-font-smoothing: subpixel-antialiased;
}
.flipBlock-container {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 320px;
    height: 240px;
    background: #eee;
    -webkit-transform: skewY(-2deg) translate3d(0, 0, 0) scale(1.0, 1.0);
    -webkit-perspective: 1000px;
}
.unscewed-containter {
    -webkit-transform: skewY(2deg) translate3d(0, 0, 0) scale(1.0, 1.0);
}
.flip {
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease-out;
    -webkit-transform-style: preserve-3d;
}
.flipFrontface {
    position: absolute;
    top: 0;
    z-index: 50;
    width: inherit;
    height: inherit;
    text-align: center;
    background: #aef;
    -webkit-backface-visibility: hidden;
}
.flipBackface {
    position: absolute;
    top: 0;
    z-index: 40;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #d9a;
    -webkit-transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
}
.flipBlock-container:hover .flip {
    -webkit-transform: rotateX(180deg) scale(1.0, 1.0);
}
.faceContent {
    width: 80%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: skewY(2deg) translate3d(-50%, -50%, 0px);
}