JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left">
        <nav>
            <ul class="simple-tree-nav-wrapper">
                <li class="parent">
                    <div class="simple-tree-nav-node-wrapper simple-tree-nav-node-nid-1">
                        <span class="simple-tree-nav-cont simple-tree-nav-open">&#160;&#160;&#160;&#160;</span>
                        <span class="simple-tree-nav-icon simple-tree-nav-icon-open"></span>
                        <span class="simple-tree-nav-name">Library</span>
                    </div>
                    <ul class="simple-tree-nav-children">
                        <li id="nav-library-events" class="selected">
                            <div class="simple-tree-nav-node-wrapper simple-tree-nav-node-nid-11">
                                <span class="simple-tree-nav-cont simple-tree-nav-open"></span>
                                <span class="simple-tree-nav-icon simple-tree-nav-icon-open"></span>
                                <span class="simple-tree-nav-name">Events</span>
                            </div>
                        </li>
                        <li id="nav-library-photos">
                            <div class="simple-tree-nav-node-wrapper simple-tree-nav-node-nid-12">
                                <span class="simple-tree-nav-cont simple-tree-nav-open"></span>
                                <span class="simple-tree-nav-icon simple-tree-nav-icon-open"></span>
                                <span class="simple-tree-nav-name">Photos</span>
                            </div>
                        </li>
                        <li id="nav-library-faces">
                            <div class="simple-tree-nav-node-wrapper simple-tree-nav-node-nid-13">
                                <span class="simple-tree-nav-cont simple-tree-nav-open"></span>
                                <span class="simple-tree-nav-icon simple-tree-nav-icon-open"></span>
                                <span...

CSS

html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    background:#fff;
    font-size:76%;
    font-family: "helvetica neue", helvetica, arial, sans-serif;
}

body {
    height:100%;
    max-height:100%;
    margin:0;
    padding:0;
}

#left {
    position:absolute;
    left:0;
    bottom:0;
    height:100%;
    width:200px;
    background-color:#D9DEE8;
    border-right:1px solid #424242;
    font-size:1.2em;
    z-index:4;
}

#left nav {
    text-shadow: 0 1px 0 #fff;
}

#left ul{
    margin:0;
    cursor:pointer;
}

#left .parent .simple-tree-nav-name{
    padding-top:10px;
    padding-left:10px;
    color:#6D738F;
}

#left .parent .simple-tree-nav-cont {
    font-size:0.8em;
    color:#9BA7B4;
}

#left li li {
    padding-left:40px;
    padding-top:2px;
    padding-bottom:3px;
    margin-top:2px;
    border-top:1px solid #D9DEE8;
}

#left nav li.section .simple-tree-nav-children {
    color:#000;
}

#left nav ul.simple-tree-nav-children li.selected .simple-tree-nav-name {
    color:#fff;
}

#left nav ul.simple-tree-nav-children li.selected {
    background-color:#0063BC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#62A2E0), to(#0063BC));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(bottom, #0063BC, #62A2E0);
    background-image: -moz-linear-gradient(bottom, #0063BC, #62A2E0);
    background-image: -ms-linear-gradient(bottom, #0063BC, #62A2E0);
    background-image: -o-linear-gradient(bottom, #0063BC, #62A2E0);
    background-image: linear-gradient(bottom, #0063BC, #62A2E0);
    border-top:1px solid #4891D5;
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

#left nav li.editing {
    background-color:#AFBED9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#AFBED9), to(#8093BA));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #AFBED9, #8093BA);
    background-image: -moz-linear-gradient(top, #AFBED9, #8093BA);
   ...

JavaScript

/*
---
description: Have a small simple navigation that you can modify some of the rows in predefine sections.

authors:
  - Jean-Nicolas Boulay Desjardins (http://jean-nicolas.name)

license:
  - MIT-style license

requires:
 - core/1.4:   '*'

provides:
  - SimpleTreeNav
...
*/

var SimpleTreeNav = new Class({
    
    Implements: [Options, Events],
    
    options: {
        notHiddenSectionIndicator: '&#9660;',
        hiddenSectionIndicator: '&#9658;'
    },
    
    /* initialization */
    initialize: function(container, options) {
        this.container = document.id(container);
        this.links = this.container.getElements('li li');
        this.sectionsHeaders = this.container.getElements('.section-header');
        this.hideAble = this.container.getElements('.hide-able');
        this.editable = this.container.getElements('.editable');
        this.setOptions(options);
        this.attach();
        this.fireEvent('initialized');
    },
    
    attach: function(){
        var self = this;
        this.container.addEvents({
            'click': function(e) {
                var target = document.id(e.target);

                if (target.match('input')){return;}

                if (target.hasClass('selected')) { // Active when a row is selected twice
                    self.editLink(target);
                } else { // new selection
                    self.unEditLink();
                    self.selectLink(target);
                }

            },
            'dblclick': function(e) {
                var target = document.id(e.target);

                if (self.links.hasClass('editing')) {
                    self.unEditLink();
                }
            
                self.editLink(target);
            },
            'keydown': function(event){
                var target = document.id(event.target);
                if (event.key == 'enter'){
                    if(target.match('input')){
                       ...