JSFiddle - React, Tailwind, and code Playground
by Kesav Telaprolu
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height:400;width:900;margin:auto"></div>
JavaScript
( Input=>{
var htmlstring ='<div style="width:900;height:500;">'+
'<div style="height:100;width:900px;"><span id="title" style="margin-left:15px"></span><br><span id="subtitle" style="margin-left:15px"></span><br><div style="width:460px;margin-top:20px;margin-left:15px"><span id="charttitle"></span></div><span id="tabletitle" style="position:relative;"></span>'+
'<div id="leftcolumn" style="border:1px solid white;float:left;min-height:400px;width:440px;margin-top:15px;margin-left:16px">' +
' </div>' +
' <div id="rightcolumn" style="border:1px solid white;float:left;min-height:400px;width:440px;color:black;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;">'+
'<span id=LegendTag1 style="font-size:12px;">Fair share is based against current share from survey response</span>'+
'<span style="left:150px;position:relative;font-size:12px;">Competitor Brands</span><span style="left:230px;position:relative;font-size:12px;">Portfolio Brands</span><br>'+
'<div style="font-size:12px;padding-top:15px;float:left"><b>Note: The values displayed are rounded.</b></div>'+
'<div style="background-color:rgb(146,208,80);width:15px;height:15px;float:left;left:240px;position:relative;margin-top:5px"></div><span style="float:left;font-size:12px;left:243px;position:relative;padding-top:7px">> = 120</span>'+
'<div style="background-color:rgb(72,154,30);width:15px;height:15px;float:left;left:245px;position:relative;margin-top:5px"></div><span style="float:left;font-size:12px;left:248px;position:relative;padding-top:7px">> 149</span>'+
'<div...