JSFiddle - React, Tailwind, and code Playground

by jihoon kim

HTML

<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css">
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script>
var dooves = {
	amchart : {
		init:function(id) {
			var chart = AmCharts.makeChart(id, {
				"type": "serial",
				"theme": "light",
				"marginRight":80,
				"autoMarginOffset":20,
//			"dataDateFormat": "YYYY-MM-DD HH:NN",
//			"dataProvider": dp1,
				"valueAxes": [{
					"axisAlpha": 0,
					"guides": [{
						"fillAlpha": 0.1,
						"fillColor": "#888888",
						"lineAlpha": 0,
						"toValue": 16,
						"value": 10
					}],
					"position": "left",
					"tickLength": 0
				}],
//			"graphs": [{
//				"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
//				"bullet": "round",
//				"balloon": {
//					"adjustBorderColor": true,
//					"color": "#000000",
//					"cornerRadius": 5,
//					"fillColor": "#FFFFFF"
//				},
//				"dashLength": 3,
//				"colorField":"color",
//				"valueField": "value",
//			}],
//			"categoryField": "date",
//			"trendLines": [{
//				"finalDate": "2012-01-11 12",
//				"finalValue": 19,
//				"initialDate": "2012-01-02 12",
//				"initialValue": 10,
//				"lineColor": "#CC0000"
//			}, {
//				"finalDate": "2012-01-22 12",
//				"finalValue": 10,
//				"initialDate": "2012-01-17 12",
//				"initialValue": 16,
//				"lineColor": "#CC0000"
//			}],
//			"chartScrollbar":...

CSS

.none {
		  display: none
		}

		.menuleft td {
		  padding: 10px
		}

		#selectList2_listbox .k-item.k-state-selected {
		  /*color: #ff0000 !important;*/
		  background-color: skyblue !important;
		}

		#chartdiv {
		  width: 100%;
		  height: 500px;
		}

		/*
		*/

		.k-multiselect-wrap.k-floatwrap {
		  height: 198px;
		  overflow-x: hidden;
		  overflow-y: scroll;
		}

		#divMultiSelect .k-input {
		  /*background-color: #f00;*/
		}

		footer {
		  position: fixed;
		  bottom: 0px;
		  left: 0px;
		  right: 0px;
		}

JavaScript

pv.d.PamTagMapping={};
        pv.d.storage=[];
        pv.d.PamTagMapping.findOne=function(k){
        	return pv.d.PamTagMapping.storage[k];
        }
        
	
    $(document).ready(initialize);
		function loadPamMappingInfo() {
			pv.d.PamTagMapping.storage = [
				null
				,{"pamTagMappingSeq":  1,"tagAlias": "VIB  1X - BRG #1 ","description": "VIB  1X - BRG #1 "}
				,{"pamTagMappingSeq":  2,"tagAlias": "VIB  1Y - BRG #1 ","description": "VIB  1Y - BRG #1 "}
				,{"pamTagMappingSeq":  3,"tagAlias": "VIB  2X - BRG #2 ","description": "VIB  2X - BRG #2 "}
				,{"pamTagMappingSeq":  4,"tagAlias": "VIB  2Y - BRG #2 ","description": "VIB  2Y - BRG #2 "}
				,{"pamTagMappingSeq":  5,"tagAlias": "VIB  3X - BRG #3 ","description": "VIB  3X - BRG #3 "}
				,{"pamTagMappingSeq":  6,"tagAlias": "VIB  3Y - BRG #3 ","description": "VIB  3Y - BRG #3 "}
				,{"pamTagMappingSeq":  7,"tagAlias": "VIB  4X - BRG #4 ","description": "VIB  4X - BRG #4 "}
				,{"pamTagMappingSeq":  8,"tagAlias": "VIB  4Y - BRG #4 ","description": "VIB  4Y - BRG #4 "}
				,{"pamTagMappingSeq":  9,"tagAlias": "VIB  5X - BRG #5 ","description": "VIB  5X - BRG #5 "}
				,{"pamTagMappingSeq": 10,"tagAlias": "VIB  5Y - BRG #5 ","description": "VIB  5Y - BRG #5 "}
				,{"pamTagMappingSeq": 11,"tagAlias": "VIB  6X - BRG #6 ","description": "VIB  6X - BRG #6 "}
				,{"pamTagMappingSeq": 12,"tagAlias": "VIB  6Y - BRG #6 ","description": "VIB  6Y - BRG #6 "}
				,{"pamTagMappingSeq": 13,"tagAlias": "VIB  7X - BRG #7 ","description": "VIB  7X - BRG #7 "}
				,{"pamTagMappingSeq": 14,"tagAlias": "VIB  7Y - BRG #7 ","description": "VIB  7Y - BRG #7 "}
				,{"pamTagMappingSeq": 15,"tagAlias": "VIB  8X - BRG #8 ","description": "VIB  8X - BRG #8 "}
				,{"pamTagMappingSeq": 16,"tagAlias": "VIB  8Y - BRG #8 ","description": "VIB  8Y - BRG #8 "}
				/*				,{"pamTagMappingSeq": 17,"tagAlias": "VIB  9X - BRG #9 ","description": "VIB  9X - BRG #9 "}
				 ,{"pamTagMappingSeq": 18,"tagAlias": "VIB  9Y - BRG #9...