JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pdp-size-chart__guide-image-container span10 smartphone-landscape-full-fluid-width"><div class="pdp-size-chart__guide-image-measurements"><img src="https://res.cloudinary.com/ssense/image/upload/v1485365343/size_guide/category_62_64_65_66_67.jpg"> <ul> 
<div id="xs-sizes">
            <li class="measurement" style="left: 15%; top: 33%;">
                63.5
            </li><li class="measurement" style="left: 48%; top: 16%;">
                43.5
            </li><li class="measurement" style="left: 48%; top: 79%;">
                50.5
            </li><li class="measurement" style="left: 48%; top: 50%;">
                43
            </li><li class="measurement" style="left: 83%; top: 62%;">
                64.5
            </li>
            
</div>
            <!-- S -->
            
            <div id="s-sizes">
             <li class="measurement" style="left: 15%; top: 33%;">
                64
            </li><li class="measurement" style="left: 48%; top: 16%;">
                44.5
            </li><li class="measurement" style="left: 48%; top: 79%;">
                54
            </li><li class="measurement" style="left: 48%; top: 50%;">
                46
            </li><li class="measurement" style="left: 83%; top: 62%;">
                68
            </li>
            </div>
            <!-- M -->
             <div id="m-sizes">
             <li class="measurement" style="left: 15%; top: 33%;">
                65
            </li><li class="measurement" style="left: 48%; top: 16%;">
                46
            </li><li class="measurement" style="left: 48%; top: 79%;">
                55
            </li><li class="measurement" style="left: 48%; top: 50%;">
                48.5
            </li><li class="measurement" style="left: 83%; top: 62%;">
                69
            </li>
            </div>
            <!-- L -->
            <div id="l-sizes">
             <li class="measurement" style="left: 15%; top: 33%;">
       ...

CSS

.pdp-size-chart__guide-image-container {
    position: relative;
    text-align: left;
}
.pdp-size-chart__guide-image-measurements {
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
    }
    .pdp-size-chart__guide-image-measurements ul {
    position: absolute;
    top: 0;
    left: -10px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.pdp-size-chart__guide-image-measurements ul li {
    position: absolute;
    background-color: #fff;
    list-style-type: none;
    margin: 0;
    z-index: 1;
    color: #000;
    padding: 0;
    text-align: center;
    text-transform: none;
    width: 60px;
}

#xs-sizes{
  display: block;
}
#s-sizes {
  display: none;
}
#m-sizes {
  display: none;
}
#l-sizes {
  display: none;
}
#xl-sizes {
  display: none;
}
#xxl-sizes {
  display: none;
}

JavaScript

function checksize() {    
                var xs = document.querySelector(   
                'input[value="XS"]');
                var s = document.querySelector(   
                'input[value="S"]');
                var m = document.querySelector(   
                'input[value="M"]');
                  var l = document.querySelector(   
                'input[value="L"]');
                  var xl = document.querySelector(   
                'input[value="XL"]');
                  var xxl = document.querySelector(   
                'input[value="XXL"]');
                 var xssizes = document.getElementById("xs-sizes");
                 var ssizes = document.getElementById("s-sizes");
                 var msizes = document.getElementById("m-sizes");
                 var lsizes = document.getElementById("l-sizes");
                 var xlsizes = document.getElementById("xl-sizes");
                 var xxlsizes = document.getElementById("xxl-sizes");
                
                
                
                if(xs.checked) { 
                xssizes.style.display = "block";
            } else {
            xssizes.style.display = "none";
  }
  
  if(s.checked) { 
                ssizes.style.display = "block";
            } else {
            ssizes.style.display = "none";
  }            
              
         if(m.checked) { 
                msizes.style.display = "block";
            } else {
            msizes.style.display = "none";
  }    
  if(l.checked) { 
                lsizes.style.display = "block";
            } else {
            lsizes.style.display = "none";
  }     
  
  if(xl.checked) { 
                xlsizes.style.display = "block";
            } else {
            xlsizes.style.display = "none";
  }     
  if(xxl.checked) { 
                xxlsizes.style.display = "block";
            } else {
            xxlsizes.style.display = "none";
  }     
        } 
        
         function convert() {
          var measurements =...