JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="red">
    Tea coffee and snacks
</div>

CSS

div.red {
    position:absolute;
    background-color:darkgray;
    padding:5px;
    cursor:pointer;
    width:140px;
    height:20px;
    transition: all 2s;
}
div.red:hover {
    transform: rotateY(180deg);
    /*transform: rotateZ(180deg);*/
    -webkit-transform: rotateY(180deg); /* Safari and Chrome */
    /*-webkit-transform: rotateZ(180deg); /* Safari and Chrome */
    width:280px;
    margin-top:20px;
    height:40px;
}

JavaScript

/*$('div.red').hover(function() {
    $(this).animate({
    width: '+=50',
    height: '+=50'
    }, 200)
},
function() {
    $(this).animate({
        width: '-=50',
        height: '-=50'
    }, 200)
});*/