JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<div id="container" style="width:1240px;height:688px;overflow-x:auto;border:1px solid #dbdbdb;border-radius:10px;"></div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>

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:...

JavaScript

(input => {

var normsdata = true;
const baseUrl = "https://ktrioddidevnortheurope.blob.core.windows.net/chart-templates-public-assets/";

var imgTooltipDiv = `<div id='imgtooltipdiv' class='imgToolTip'>
 <div class='imgToolTipSpanContainer'>
 <span class='imgToolTipImgdata' id='imagedata'></span>
 </div></div>`;
 
 $('head').append(`<style>
div.example {
  padding: 10px;
  background: #ffffff;  
}

/* Use for 1 lines of text before truncation */
.mle-1 {
  overflow: hidden;
  position: relative;
  line-height: 1em;
  max-height: 1em; 
  text-align: center;
  padding-right: 1em;
}

.mle-1:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

.mle-1:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: #FFFFFF;
}


/* Use for 2 lines of text before truncation */
.mle-3 {
  overflow: hidden;
  position: relative;
  line-height: 1em;
  max-height: 2.9em; 
  text-align: center;
  padding-right: 1em;
}

.mle-3:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

.mle-3:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: #FFFFFF;
} </style>`);
 
const classificationImages = [baseUrl + "me-01-ccIncrementalwinner.png", baseUrl + "me-01-ccInvestigate.png", baseUrl + "me-01-ccRadical.png", baseUrl + "me-01-ccStar.png", baseUrl + "me-01-ccStop.png", baseUrl + "me-01-ccWinningCannibal.png"];

$(imgTooltipDiv).appendTo('body');

$('.imgToolTip').css({
  "border-radius": "10px",
  "margin-top": "-10px",
  "display": "none",
  "width": "176px",
  "height": "38px",
  "box-shadow": "0 2px 10px rgba(0, 0, 0, 0.3)",
  "border": "1px solid #adacac",
  "background-color": "#fcfcfc",
  "position": "absolute",
  "z-index": "1"
});

$('.imgToolTipSpanContainer').css({
  "padding": "7px 10px",
  "text-align": "center"
});

$('.imgToolTipImgdata').css({
  "color": "#000000",
  "font-size": "17px",
 ...