JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div id="letters">
    hi
    </div>
</div>

CSS

.wrapper{
    position: absolute;
    border: solid 2px;
    height: 20px;
    width: 80px;
    animation: spin 20s linear infinite;
    animation-direction: reverse;
    animation-play-state: paused;
}

#letters {
    height: 20px;
    width: 80px;
    z-index: 1;
    border: 1px solid #989898;
    animation: spin 15s linear infinite;
    transform-origin: center center;
}
.wrapper:hover{
    animation-play-state: running;
}


@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}