JSFiddle - React, Tailwind, and code Playground

by ason5861_cs

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<?php 
//include "../config.php";
require_once("../conf/db_conn.php");
?>
<style>
label {
display: inline-block;
width: 5em;
}
// li:nth-child(1) {
  // color: blue;
// }
// li:nth-child(2) {
  // color: red;
// }
// li:nth-child(3) {
  // color: yellow;
// }
// li:nth-child(4) {
  // color: purple;
// }
// li:nth-child(5) {
  // color: green;
// }

// li.jstree-open > ul {
    // color: red;
    // display: block;
// }

// li.jstree-open > ul {
    // color: red;
    // display: block;
// }
// li.jstree-open{
    // color: blue;
    // display: block;
// }
// li.jstree-open > ul li.jstree-open > ul {
    // color: black;
    // position: relative;
    // left: -18px;
    // padding-left: 18px;
    // width: 100%;
 // }
 
#category{
	font-size:5px;
}
 
</style>
<br>

   <!-- Initialize jsTree -->
   <div id="folder_jstree" title="JTM"></div>
   <!-- Store folder list in JSON format -->
   <textarea style="" id='txt_folderjsondata'>
     [{"id":"1","parent":"#","text":"100 Pentadbiran <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"2","parent":"#","text":"200 Pengurusan Tanah & Bangunan <span id='category'>JTM<\/span>","state":{"selected":true,"opened":true}},{"id":"3","parent":"#","text":"300 Pengurusan Aset <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"4","parent":"#","text":"400 Pengurusan Kewangan <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"5","parent":"#","text":"500 Pengurusan Sumber Manusia <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"6","parent":"1","text":"100-1 Perundangan <span...