JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"  style="width:1240px;height:688px;margin:0px auto;"></div>

JavaScript

(Input => {
    var volumeinput = Input.volume[0];
    var presufer ="k";
    if(volumeinput < 9999) {
         	volumeinput= volumeinput;
 	}
 	else if(volumeinput < 1000000) {
     	volumeinput = Math.round(volumeinput/1000) 
        presufer= "K";
 	}
 	else if( volumeinput < 10000000) {
     	volumeinput = (volumeinput/1000000);presufer= "M";
 	}
 	else if(volumeinput < 1000000000) {
     	volumeinput = Math.round((volumeinput/1000000));presufer= "M";
 	}
 	else if(volumeinput < 1000000000000) {
     	volumeinput = Math.round((volumeinput/1000000000));presufer= "B";
 	}
        var htmlstring = '<div style="width:900;height:400;">' +
            '<div style="height:100;width:900px"><span id="title" style="font-weight:bold;font-size:20px;font-family:Arial;"></span><br><span id="subtitle" style="font-weight:bold;font-size:12px;font-family:Arial;"></span><br><div style="width:460px;margin-top:20px"><span id="charttitle" style="font-weight:bold;font-size:12px;font-family:Arial;"></span></div>' +
            '<div id="leftcolumn" style="border:1px solid white;float:left;min-height:400;color:white;width:540px;margin-top:15px"></div>' +
            '<div id="Footer" style="border-width:1.5px;border-bottom-style:solid;margin-top:10px;padding-left:10px;padding-top:5px;height:50px;background-color:lightgray;width:885px;float:left;">'+
      '<div style="width:443px;float:left;margin-top:5px;">'+
      '<span id="LegendTag1" style="font-size:12px">Households:52.0m</span>'+
      '<span id="LegendTag2" style="left:10px;position:relative;font-size:12px;">Market size(m packs):50</span>'+
      '<span id="LegendTag3" style="font-size:12px;left:20px;position:relative;">Category pen.:45.0%</span>'+
      '<div style="font-size:9px;padding-top:5px;/* float:left */">Volume forecast provided for ballpark guidance purposes only – not to support financial planning / investment decisions<br>It is based on concept evaluation using early stage stimulus, a simplified marketing plan...