JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spin"><div class="yin-yang"></div></div>

CSS

@keyframes spin {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(360deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@-o-keyframes spin {
    0% { -o-transform: rotate(360deg); }
    100% { -o-transform: rotate(0deg); }
}
.spin {
    animation: spin 3.5s linear 0s infinite normal;
    -moz-animation: 3.5s linear 0s normal none infinite spin;
    -webkit-animation: spin 3.5s linear 0s infinite normal;
    -0-animation: spin 3.5s linear 0s infinite normal;
    width: 100px;
    height: 100px;
    border-radius: 50px 50px 50px 50px;
    overflow: hidden;
    margin-left: -50px;
    margin-top: -50px;
    top: 50%;
    left: 50%;
    position: absolute;
}
.spin:hover {
    animation: spin 3.5s linear 0s infinite reverse;
    -moz-animation: 3.5s linear 0s reverse none infinite spin;
    -webkit-animation: spin 3.5s linear 0s infinite reverse;
    -0-animation: spin 3.5s linear 0s infinite reverse;
}
.yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
.yin-yang:before {
    content:"";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
.yin-yang:after {
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}