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/6.1.1/highcharts.js"></script>
<div id="container" style="height:688px;width:1240px;overflow:auto;border-radius:6px;border:1px solid #dbdbdb;"></div>

CSS

/*
 * 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"),
         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.woff2")...

JavaScript

(input => {
        var chartWrapper = $("<div></div>").appendTo("#container")
            .attr("id", "chart_wrapper");
        var chartDiv = $("<div></div>").appendTo("#chart_wrapper")
            .attr("id", "chart_div");

        var templs = {
            "charttile": "This chart shows the overall States of Mind segments. It breaks out each of the key CM segments by each of the SOM segments. It gives an overall indication of how consumers relate to the category, including their involvement in their choices and their brand preferences.",
            "ExclusiveMind": "Exclusive Mind <Exclusive Mind>  % of people in this market care about this category and have one brand that meets their needs.",
    "RoutineMind": "Routine Mind <Routine Mind> % of people in this market have one brand that meets their needs, but the decision of which brand to use is not that important to them.",
        "DividedMind": "Divided Mind <Divided Mind> % of people in this market have more than one brand which meets their needs.",
            "Indifferent": "Indifferent Mind <Indifferent Mind> % of people in this market don't care about this category or the brands in it",
                "FrustratedMind": "Frustrated Mind <Frustrated Mind>% of people in this market care about this category or the brands in it",
                    "DividedMindIn": "Divided Mind - Involved <Divided Mind - Involved> % of people in this market have more than one brand which meets their needs.They care about the category.",
                        "DividedMindUn": "Divided Mind - Uninvolved <Divided Mind - Uninvolved> % of people in this market have more than one brand which meets their needs.They do not care about the category.",
                            "In_Unvolved": "<Involved /uninvolved>  <InvolvedValue / uninvolvedValue > % are < Involved / Uninvolved >  with this category"
    }

                                        var tmpl1 = '<div...