JSFiddle - React, Tailwind, and code Playground

by Vinu Felix

HTML

<script src="https://ddm-dev.relationshipaudits.com/js/dhtmlx/codebase/dhtmlx.js"></script>
<link rel="stylesheet" href="https://ddm-dev.relationshipaudits.com/js/dhtmlx/skins/terrace/dhtmlx.css">
<link rel="stylesheet" href="https://ddm-dev.relationshipaudits.com/js/dhtmlx/codebase/fonts/font_awesome/css/font-awesome.min.css">

<div id ="dhxcontainer">
    
</div>

CSS

#dhxcontainer{
        display:block;
        overflow:visible;
        height:650px;
        width:99%;
        box-sizing: border-box;
        background-color:white;
        position:relative;
    }

JavaScript

var dhxLQXML=`
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<rows>
    <row id='3'>
     <cell icon='database'><![CDATA[OPINION]]></cell>
     <row id='3_4'><cell icon='pencil-square-o' xmlkids='1'><![CDATA[What could they do better or improve?]]></cell></row>
    </row>
    <row id='6'><cell icon='database'><![CDATA[OPINION 1]]></cell>
      <row id='6_7'><cell icon='folder-open'><![CDATA[Sample Question?]]></cell>
      	<row id='6_7_18'><cell icon='dot-circle-o'><![CDATA[Option1]]></cell></row>
      	<row id='6_7_19'><cell icon='dot-circle-o'><![CDATA[Option2]]></cell></row>
      	<row id='6_7_20'><cell icon='dot-circle-o'><![CDATA[Option3]]></cell></row>
      	<row id='6_7_21'><cell icon='dot-circle-o'><![CDATA[Option4]]></cell></row>
      	<row id='6_7_22'><cell icon='dot-circle-o'><![CDATA[Option5]]></cell></row>
      </row>
      <row id='6_40'><cell icon='pencil-square-o' xmlkids='1'><![CDATA[Any further comments?]]></cell></row>
    </row>
    <row id='5'><cell icon='database'><![CDATA[OPINION]]></cell>
      <row id='5_7'><cell icon='folder-open'><![CDATA[Non filtering Question]]></cell>
      	<row id='5_7_18'><cell icon='dot-circle-o'><![CDATA[Option1]]></cell></row>
      	<row id='5_7_19'><cell icon='dot-circle-o'><![CDATA[Option2]]></cell></row>
      	<row id='5_7_20'><cell icon='dot-circle-o'><![CDATA[Option3]]></cell></row>
      	<row id='5_7_21'><cell icon='dot-circle-o'><![CDATA[Option4]]></cell></row>
      	<row id='5_7_22'><cell icon='dot-circle-o'><![CDATA[Option5]]></cell></row>
      </row>
      <row id='5_40'><cell icon='pencil-square-o' xmlkids='1'><![CDATA[Any further comments?]]></cell></row>
    </row>
    <row id='4'><cell icon='database'><![CDATA[JUDGEMENT]]></cell>
      <row id='4_7'><cell icon='folder-open'><![CDATA[Non filtering Question]]></cell>
      	<row id='4_7_18'><cell icon='dot-circle-o'><![CDATA[Option1]]></cell></row>
      	<row id='4_7_19'><cell icon='dot-circle-o'><![CDATA[Option2]]></cell></row>
      	<row...