JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<head>
  <style>
      /*
* Legal Disclaimer
*
  print '\n', 'Note that the webfonts share the TT sources'
* These Fonts are licensed for unlimited use on domains and their subdomains of The Kantar Group.
* It is illegal to download or use them on other websites.
*
* While the @font-face statements below may be modified by the client, this
* disclaimer may not be removed.
*
* Lineto.com, 2016
*/



@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"),
  ...

JavaScript

( input=>{


        //TITLE TEMPLATE

var titleHtml = 
`
<div class="chartTitles">

 <div id="title"></div>
 <div id="subTitle"></div>
 <div id="chartTitle"></div>
 
</div>`;


//CHART TEMPLATE

var chartHtml = 
`
<div id="chartContainer">

  <div id="leftTable" ></div>
  <div id="rightTable"></div>

</div>

`;


//LEGEND TEMPLATE

var legendHtml = 
`
<div id="legendWrapper">     
     <div class="legend"> 
           <p class="legend-name">
           <span class="legendText"> Fair share is based against current share from survey response </span></p> 
   </div>

   <div class="legend"> 
           <p class="legend-name">
         </span><span class="legendText Portfolio">Competitor Brands</span><span class="legend-dot Competitor"></p> 
   </div>
   
   <div class="legend"> 
           <p class="legend-name">
         </span><span class="legendText"> > = 120</span> <span class="legend-dot Competitorgreathan"></p> 
   </div>
   
   <div class="legend"> 
           <p class="legend-name">
          </span><span class="legendText">> 149</span></p> 
   </div>
   
   <div class="legend"> 
           <p class="legend-name">
          <span class="legendText Portfolio">Portfolio</span><span class="legend-dot Portfolio"></span></p> 
   </div>
   
   <div class="legend"> 
             <p class="legend-name"> 
              <span class="legendText">> = 150</span><span class="legend-dot Portfoliogreathan"></span></p> 
     </div>
     <div class="legend"> 
             <p class="legend-name">
            <span class="legendText">> 179</span></p> 
     </div>
     <div class="legend"> 
             <p class="legend-name">
            <span class="legendText Regular">Note: The values displayed are rounded.</span></p> 
     </div>
     
  </div>
`; 

//HTML AND CSS

$("#container").append(titleHtml);
$('.chartTitles').css({
  "margin-top": "35px"
})
$('#title').html(input.title);
$("#title").css({
  "margin":"0px 30px 0px 30px",
  "color":"#000000",    
  "font-size":"32px",
...