JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<div id="center">
  <i class="fas fa-snowboarding"></i>
</div>

SCSS

#center {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 5rem;
    transform: translate(-50%, -50%);
  
    .fa-snowboarding {
        transform: rotate(0deg);
        transition-property: transform;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;

        &:hover {
          transform: rotate(360deg);
        }
    }
}