JSFiddle - React, Tailwind, and code Playground

HTML

<div class="krug slide-left"></div>
<div class="krug slide-right"></div>
<div class="krug slide-active"></div>

CSS

body {
   background-color: #000;
}
.krug {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 20px solid transparent;
    border-radius: 50%;
    transform: rotate(-45deg);
}
    .slide-left {
        border-left-color: blue;
        border-top-color: blue;
        z-index: 2;
    }
    .slide-right {
        border-right-color: blue;
        border-bottom-color: blue;
    }
    .slide-active {
        border-left-color: yellow;
        border-bottom-color: yellow;
        transform: rotate(100deg);
    }
    body:hover .slide-active {
        transform: rotate(180deg);
        transition-duration: 2s;
    }