JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myMsg">
    <p id="welly" style="color: #009">
        Welcome to Y3!
        <br/>
        <br/>
        <br/>
        Thanks for stopping by!
    </p>
</div>

CSS

.myMsg {
    background: white;
    width: 800px;
    height : 500px;
    margin: 100px auto;
    border: 1px solid black;
    opactiy: 0.5;
    -webkit-transform: scale(.1,.1) skew(45deg) translateX(-300px);
    transform: scale(.1,.1) skew(45deg) translateX(-300px);
    box-shadow: 0px 0px 200px grey;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.myMsg:hover {
    opacity: 1;
    box-shadow: 0px 0px 200px grey;
    -webkit-animation: spin 1s forwards;
    animation: spin 1s forwards;
}

@-webkit-keyframes spin {
    from { -webkit-transform: scale(.1,.1) skew(0deg) rotate(0deg); }
    to { -webkit-transform:  scale(1,1) skew(0deg) rotate(360deg); }
}
@keyframes spin {
    from { transform: scale(.1,.1) skew(0deg) rotate(0deg); }
    to { transform: scale(1,1) skew(0deg) rotate(360deg); }
}