JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center">
    <div id="hex1" class="hexagon-wrapper">
    <div id="radar" class="hexagon">                
      <div class="retentor">
        <div class="pointer"></div>
      </div>
    </div>
    <div class="hexagonshadow"></div>        
    </div>
</div>  

<svg width="0" height="0">
    <defs>
        <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
            <polygon points="0 0.5, 0.25 0, 0.75 0, 1 0.5, 0.75 1, 0.25 1" />
        </clipPath>
    </defs>
</svg>

SCSS

body{
      background : gray;
    }
    $azul : #3399dd;
    $sombra : 0px 0px 35px 2px $azul;

    .center{
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 100px;
        z-index: -99;        
    }
    .retentor{
        height: 100%;
        width: 87px;
        left: -50%;
        z-index: 1;
        position: relative;
        clip-path: url(#svgPath);
        //clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
      }
      .hexagon .pointer {
        position: absolute;
        z-index: 1024;
        left: -10px;
        right: -10px;
        top: -10px;
        bottom: 50%;
        will-change: transform;
        transform-origin: 50% 100%;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        background-image: linear-gradient(135deg, 
          rgba(255, 255, 255, 0.8) 0%, 
          rgba(255, 255, 255, 0.02) 70%,
          rgba(255, 255, 255, 0) 100%
          );
          -webkit-clip-path: polygon(100% 0, 
          100% 10%, 
          50% 100%, 0 100%, 0 0);
        clip-path: polygon(100% 0, 
          100% 10%, 
          50% 100%, 0 100%, 0 0);
        
        animation: rotate360 3s infinite linear;
      }
      
      @keyframes rotate360 {
        0% {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-360deg);
        }
      }
      #hex1 {
        width: 75px;
        height: 75px;
      }
    
      #radar {
        background-color: #39D;   
      }
      .centralizador{
        position: absolute;
        left: 50%;	
      }
      .hexagon-wrapper {
        text-align: center;
        position: relative;
        display: inline-block;
      }
      .hexagon {
        height: 100%;
        width: 57.735%;
        display: inline-block;
        
      }
      .hexagon:before {
        position: absolute;
        top: 0;
        right: 21.1325%;
       ...