JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<!--if you add this - arrow points to the wrong direction
<div style="display:none"></div>
-->
<div class="quarter">
</div>
<div class="quarter">
</div>
<div class="quarter">
</div>
<div class="quarter">
</div>
<div class="circle">
<div class="pointer">
</div>
</div>
</div>

CSS

.quarter {
  float: left;
  width: 50%;
  height: 50vh;
}
.quarter:nth-child(1) { background-color: yellow; }
.quarter:nth-child(2) { background-color: green; }
.quarter:nth-child(3) { background-color: red; }
.quarter:nth-child(4) { background-color: blue; }

.circle {
  background-color: white;
  position: absolute;
  width: 160px;
  height: 160px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 80px;
}

.pointer {
  background-color: black;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 6px;
  height: 140px;
  transition: 0.4s;
}

.pointer::before {
  content: "";
  position: absolute;
  left:-10px;
  top:0;
  border-color: black;
  border-top: 6px solid;
  border-right: 6px solid;
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
}

JavaScript

$(document).ready(function(){
  $('.quarter:nth-child(1)').mouseenter(function(){
    $('.pointer').css('transform','rotate(-45deg)');
  });
  $('.quarter:nth-child(2)').mouseenter(function(){
    $('.pointer').css('transform','rotate(45deg)');
  });
  $('.quarter:nth-child(3)').mouseenter(function(){
    $('.pointer').css('transform','rotate(-135deg)');
  });
  $('.quarter:nth-child(4)').mouseenter(function(){
    $('.pointer').css('transform','rotate(135deg)');
  });
});