JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "mydiv">Generic Division</div>

CSS

body {
    overflow: hidden;
}

#mydiv{
    position: absolute;
    top : 50%;
    left : 50%; 
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    
    -webkit-transition: all 2s;
    transition: all 2s;
}

#mydiv:hover{
    width : 700px;
    margin-left : -350px;
    text-align : left;
    transition-duration: 0s;
}