JSFiddle - React, Tailwind, and code Playground

HTML

<div id="goalDetails" onmouseOver="addDetails();" onmouseout="removeDetails();">

    <div class="PersonaCanvas">
        <div class="smallCircle" onclick="showProjection();"></div>
        <div id="smallestCircle" style="display: none" onclick="showBurnRate();"></div>
    </div>
    
    <div id="details" style="display: none">
        <div id="dolarsDetails">77$</div>
        <div id="projOrBurn">Projection</div>
    </div>
    
    <div id="mainShape" class="bigCircle"><div id="cpaDetails">7.03</div></div>
    
    <div class="PersonaCanvasMini"></div>
    <div id="mainLine" style="display:none"></div>
    <div id="secondaryLine" style="display:none"></div>
</div>

CSS

#goalDetails {
    width: 162px;
}

.PersonaCanvas {
    width: 137px;
    height: 100px;
    border-top: 12px solid rgb(238,238,238);
    border-left: 12px solid rgb(238,238,238);
    border-right: 12px solid rgb(238,238,238);
    border-bottom:12px solid transparent;
    -webkit-border-radius: 100px;
    -khtml-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    overflow: hidden;   
}

.PersonaCanvas img {
  display: block;

  width:100%;
  height:80%;
}

.smallCircle {
    border-radius: 50%;
    width: 11px;
    height: 12px;
    background-color: rgb(115, 244, 255);
    display: block;
    position: absolute;
    overflow: hidden;
    top: 22px;
    left: 102px;
    margin: -15px;
    z-index: 2;
    transform: rotate(-30deg) translate(130px);
}

#smallestCircle {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background-color: rgb(238,238,238);
    display: block;
    position: absolute;
    overflow: hidden;
    top: 36px;
    left: 153px;
    margin: -15px;
    z-index: 2;
    transform: rotate(-30deg) translate(130px);
}

.css-shapes-preview{ 
    position: absolute;
    top: 70px;
    left: 30px;
    height: 59px; 
    width: 118px; 
    padding: 0px; 
    background-color: rgb(115, 244, 255); 
    border-radius: 150px; 
    -webkit-transform: rotate(0deg) skew(181deg); 
    transform: rotate(0deg) skew(181deg); 
    border-top: 0px transparent; 
    border-left: 0px transparent; 
}


.bigCircle{
    position: absolute;
    top: 70px;
    left: 40px;
    width:100px;
    height:100px;
    border: 1px solid rgb(115, 244, 255);
    background: rgb(115, 244, 255);
    border-radius: 360px;
}


.PersonaCanvasMini {
    top:7px;
    position:absolute;
    width: 137px;
    height: 100px;
    border-top: 12px solid rgb(12, 54, 162);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom:12px solid transparent;
    -webkit-border-radius: 100px;
    -khtml-border-radius:...

JavaScript

function addDetails() { 
    document.getElementById('mainShape').className = 'css-shapes-preview';
    document.getElementById('details').style.display = "block";
    document.getElementById('smallestCircle').style.display = "block";
    showProjection();    
}

function removeDetails() {
    document.getElementById('mainShape').className = 'bigCircle';
    document.getElementById('mainLine').style.display = "none";
    document.getElementById('secondaryLine').style.display = "none";
    document.getElementById('smallestCircle').style.display = "none";
    document.getElementById('details').style.display = "none";
}
        
function showBurnRate() {
     document.getElementById('mainLine').style.display = "none";
     document.getElementById('secondaryLine').style.display = "block";
     document.getElementById('dolarsDetails').textContent = "22$";
     document.getElementById('projOrBurn').textContent = "Burn Rate";        
        
}
        
function showProjection() {
     document.getElementById('mainLine').style.display = "block";
     document.getElementById('secondaryLine').style.display = "none";
     document.getElementById('dolarsDetails').textContent = "77$";
     document.getElementById('projOrBurn').textContent = "Projection"; 
}