JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<html>
   <head>    
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/6.1.1/highcharts.js"></script>
      
   </head>
   
   <body>
     <div id="container"  style="width:1240px;height:688px;overflow-x: auto;border:1px solid #dbdbdb;border-radius:10px;"></div>
      </body>
      </html>

CSS

@font-face {
  font-family: "KantarBrownWeb-LightItalic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot?#iefix") format("embedded-opentype"),
       url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff2") format("woff2"),
       url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "KantarBrownWeb-BoldItalic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot?#iefix") format("embedded-opentype"),
       url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff2") format("woff2"),
       url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "KantarBrownWeb-Italic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot?#iefix") format("embedded-opentype"),
       url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "KantarBrownWeb-Thin";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Thin.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Thin.eot?#iefix") format("embedded-opentype"),
      ...

JavaScript

(input => {
const baseUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAXBAMAAACRwPCoAAAAAXNSR0IB2cksfwAAABVQTFRFAAAA9E4A7lEF71IF71II71IF71IF0fZSCAAAAAd0Uk5TABfY/x/gwP5XPwMAAABSSURBVHicbZBBDQAgDANHggIsTEI1oAAJ+PdA4AX09rxctq4Re5quOaSkoUeSS3Jpo5qGun5Uh6FfkktySTEdgQW74CLlgvT0IzRBfUGr1P2rLfQbRpnAovz3AAAAAElFTkSuQmCC";
    var chartHeader = `<div id=title></div>
                    
                    <div  id=chartTitle ></div>`;

    var marketFactor = `<div id='performanceChart'>
                  <div id='brandfluencyChart' ></div>
                  <div id='emotiveChart' ></div>
                  <div id='activationChart' ></div>
                 
                  </div>`;

    var footer =
      `
            <div id="legendWrapper">     
                   <div class="legend"> 
                         <p class="legend-name" id=nValue>
                             n. 237</p> 
                 </div>
                 
                
                </div>
            `;

    var chartImage = chartHeader + marketFactor + footer;

    $("#container").append(chartImage);
    $("#title").css({ "width": "1180px", "line-height": "42px", "margin-top": "35px", "margin-left": "30px", "font-family": "KantarBrownWeb-Light", "font-size": "32px", "color": "#000000" });
    $("#chartTitle").css({ "width": "1180px", "line-height": "42px", "margin-left": "30px", "font-family": "KantarBrownWeb-Bold", "font-size": "24px", "color": "#BD9B08" });


    $("#performanceChart").css({ "width": "1200px", "height": "520px", "margin-left": "30px", });
    $("#brandfluencyChart").css({"width":"250px","height":"500px","float":"left","margin-right":"40px"})
    $("#emotiveChart").css({"width":"500px","height":"500px","float":"left","margin-right":"40px"})
    $("#activationChart").css({"width":"350px","height":"500px","float":"left",})
    $('#legendWrapper').css({ "width": "1180px", "overflow": "hidden", "margin-top": "55px", "border-radius": "6px", "border": "1px solid...