JSFiddle - React, Tailwind, and code Playground

HTML

<section id=overview>
    <figure>
        <img/>
        <figcaption>
            Some Text
        </figcaption>
    </figure>
    <figure>
        <img/>
        <figcaption>
            Some Text
        </figcaption>
    </figure>
    <figure>
        <img/>
        <figcaption>
            Some Text
        </figcaption>
    </figure>
    <figure>
        <img/>
        <figcaption>
            Some Text
        </figcaption>
    </figure>
    <div class=indicator-wrapper>
        <div class=arrow-Wrapper></div>
        <div id=logo>R</div>
    </div>
</section>

CSS

*{box-sizing:border-box; padding:0; margin:0;}

[id=overview]{
    width:650px;
    height:480px;
    background: #F7F7F7;
    position:relative;
    margin:0 auto;
}
[id=overview] img{
    width:50px;
    height:50px;
    position:relative;
    background:#333;
}
[id=overview] figcaption{
    color: #ff0000;
    margin-top: 10px;
}

[id=overview] figure{
    padding-top:20px;
    width:50%;
    height:50%;
    position:relative;
    float:left;
    border:1px solid #333;
    text-align:center;
}
[id=indicator-wrapper]{
    width:150px;
    height:150px;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    margin: -75px 0 0 -75px;
}

[class=arrow-Wrapper]{
    width: 166px;
    height: 166px;
    border-radius: 50%;
    position: relative;
    background: #ccc;
    margin:-10px;
    transition: all 300ms ease;
}

[class=arrow-Wrapper]:before,[class=arrow-Wrapper]:after{
    content:"";
    position:absolute;
}

[class=arrow-Wrapper]:before{
    width: 0;
    height: 0;
    border-bottom: 20px solid #333;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    top: 12px;
    left: -4px;
    transform: rotateZ(-46deg);
}

[class=arrow-Wrapper]:after{
    background: #333;
    width: 80px;
    height: 80px;
    top: 0;
    left: 0;
    border-top-left-radius: 200px;
}

[id=logo]{
    width: 120px;
    height: 120px;
    background: rgb(255, 255, 255);
    z-index: 111;
    border-radius: 50%;
    position: absolute;
    top: 12px;
    left: 12px;
    color: #333;
    font-size: 5em;
    font-weight: bolder;
    text-align: center;
    line-height: 120px;
}


[id=overview] figure:nth-of-type(1):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
    transform: rotateZ(0deg);
}
[id=overview] figure:nth-of-type(2):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
    transform: rotateZ(91deg);
}
[id=overview] figure:nth-of-type(3):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
    transform:...