JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boussole">
  <div class="boussole-content">
    <div class="txt-nord" id="txt-nord"><a href="javascript:void(0)" class="point_cardinal">Nord</a></div>
    <div class="txt-ouest"><a href="javascript:void(0)" class="point_cardinal">Ouest</a></div>
    <div class="txt-est"><a href="javascript:void(0)" class="point_cardinal">Est</a></div>
    <div class="txt-sud"><a href="javascript:void(0)" class="point_cardinal">Sud</a></div>
    <div class="boussole-img">
    <div onclick='SelectBoussole(this);' id="nord" class="img-PointCardinal" style="--transformOrigin : bottom right"></div>
     <div onclick='SelectBoussole(this);' id="est" class="img-PointCardinal" style="--transformOrigin : bottom left"></div>
     <div onclick='SelectBoussole(this);' id="ouest" class="img-PointCardinal" style="--transformOrigin : top right"></div>
     <div onclick='SelectBoussole(this);' id="sud" class="img-PointCardinal" style="--transformOrigin : top left"></div>
      <div class="boussole-img-content">
      </div>
<input type="hidden" value="0" id="boussole_nord">
<input type="hidden" value="0" id="boussole_est">
<input type="hidden" value="0" id="boussole_sud">
<input type="hidden" value="0" id="boussole_ouest">
      
    </div>
</div></div>

CSS

.boussole {
  position: relative;
  float: center;
  width: 90%;
  margin: 5px auto;
  min-width: 200px;
  max-width: 500px;
  text-align: center;
}
.point_cardinal {
  font-family: Times New Roman;
  font-size: 28px;
  font-variant: small-caps;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  color: #858796;
}
.point_cardinal:hover {
  text-decoration: none;
}
.boussole::after {
  content: '';
  display: block;
  padding-bottom: 100%;
}
  
.boussole .boussole-content {
  position: absolute;
  width: 100%;
  height: 100%;
}
.boussole-content {
  display: grid;
  grid-template-columns: 50px 2fr 2fr 50px;
  -ms-grid-columns: 50px 2fr 2fr 50px;
  grid-template-rows: 50px 2fr 2fr 50px;
  -ms-grid-rows: 50px 2fr 2fr 50px;
}
.txt-nord {
  grid-column: 2 / 4; grid-row: 1;
}
.txt-ouest {
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  transform: rotate(180deg);
  grid-column: 1; grid-row: 2 / 4;
}
.txt-est {
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  grid-column: 4; grid-row: 2 / 4;
}
.txt-sud {
  grid-column: 2 / 4; grid-row: 4;
}
.boussole-img {
  grid-column: 2 / 4; grid-row: 2 / 4;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.img-PointCardinal{
  margin: 0;
  display: inline-block;
  float: left;
  clear: none;
  width: 50%;
  height: 50%;
  background-color: #2D241E;
  transform-origin: var(--transformOrigin);
  transform: rotate(45deg);
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

.img-PointCardinal:hover{
  background: #C0392B;
  cursor:pointer;
  
}

.img-PointCardinal-selected
{
  background-color: #C0392B;
}

#txt-nord:hover ~ div.boussole-img #nord {
  background-color: green;
}

.boussole-img-content{
  pointer-events: none;
  position: absolute;
  height: 100%;
  width: 100%;
  background:...

JavaScript

function SelectNb(item, nb) {
for (let i = 1; i <= 5; i++) {
document.getElementById(item + "_" + i).className= 'btn_choix_nb';
}
document.getElementById(item + "_" + nb).className= 'btn_choix_nb btn_choix_selected';
document.getElementById(item).value = nb;
}


function SelectBoussole(element) {
  element.classList.toggle("img-PointCardinal-selected");
}