JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block yellow expandable skewX">
    <div>Test</div> <span id="transp">  
    <a id="close">close</a>
    </span>

</div>

CSS

.block {

    height:195px;

    text-align: center;

    transition:padding .5s linear;

}

.yellow {

    background:#d9b541;

}

.block.expandable {

    cursor: pointer;

}

.expandable.block.fullscreen {

    z-index: 9999;

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    cursor: default;

}

.expandable.block.fullscreen.skewX {

    transition:all .4s linear;

    transform:skew(180deg);

}

/*transitions for expandable tiles */

.expandable.fullscreen #transp {

    opacity: 1;

    text-align: left;

}

#transp {

    opacity: 0;

    position: absolute;

    color:#fff;

    font-size: 18px;

    top:100;

    left:10%;

    right: 10%;

    overflow-y: auto;

    max-height: 80%;

}

.yellow:hover {

    background:#bc9b2f;

}

JavaScript

$('.expandable').on('click', function () {
    $(this).addClass('fullscreen');
});

$('#close').click(function () {
    $('.expandable').removeClass('fullscreen');


});