JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div class="a">
    <div class="config">
        Configuration menu
    </div>
    <div class="b">
        <div class="c">
            In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the graphic elements of a document or visual presentation.
        </div>
    </div>
</div>

CSS

.a {
    width: 208px;
    height: 208px;
    border: 1px solid #D5DBE1;
    border-top: 0;
    border-radius: 2px;
    position: absolute;
    top: 15px;
    left: 15px;
    background: #4C98FC;
    overflow: hidden;
    
    -webkit-perspective: 964px;
    -webkit-transform: preserve-3d;
}

.b {
/*    background: white; */
    
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 65%, #eeeeee 95%, #e0e0e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(65%,#ffffff), color-stop(95%,#eeeeee), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 65%,#eeeeee 95%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 65%,#eeeeee 95%,#e0e0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 65%,#eeeeee 95%,#e0e0e0 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 65%,#eeeeee 95%,#e0e0e0 100%); /* W3C */

background-size: 100% 260%;    
background-position: left top;
    
    
    
    position: absolute;
    top: 2px;
    -webkit-transform: rotateX(0);
    -webkit-transform-origin-y: 0%;
    transition: all .3s;
}

.config {
    position: absolute;
    top: 2px;
    width: 100%;
    text-align: center;
}

.a:hover {
    
}

.a:hover .b {
    top: 30px;
    background-position: left bottom;
    -webkit-transform: rotateX(-20deg);

    
}

.c {
    padding: 22px;
    font-family: Futura;
    font-size: 10pt;
}

JavaScript

$(function () {

    $('.a .b').height(function () {
        return $(this).parent().height() - 2;
    });

});