JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="tree">
  <ul>
  <li data-jstree='{"opened":true,"selected":true}'>
    opened <b>root node ></b>
      <ul>
        <li>default node</li>
        <li><b>badge</b> example: <span class="badge badge-warning" onclick="alert('clicked!')">clickme!</span></li>
      </ul>
    </li>
   <li data-jstree='{"disabled":true}'>root 2</li>
  </ul>
</div>

JavaScript

$('#tree').jstree();