JSFiddle - React, Tailwind, and code Playground

HTML

<div>
</div>

CSS

div {
    background: red;
    border: 5px solid green;
    width: 200px;
    height: 200px;
    border-radius: 0%;
}

div:hover {
    border: dotted 5px blue;
    animation: hover 5s;
    -webkit-animation: hover 5s; /* Safari and Chrome */
}
@keyframes hover
{
    from {}
    to {
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); /* IE 9 */
        -webkit-transform:rotate(360deg); /* Safari and Chrome */
    }
}
@-webkit-keyframes hover /* Safari and Chrome */
{
    from {}
        to {
            transform:rotate(360deg);
            -ms-transform:rotate(360deg); /* IE 9 */
            -webkit-transform:rotate(360deg); /* Safari and Chrome */
        }
}