JSFiddle - React, Tailwind, and code Playground

by eawe_

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

CSS

body {
            margin: 0;
        }
        
        .sidebar {
            float: left;
        }
        
        .content {
            float: left;
        }
        
        .header {
            margin: 17px;
        }
        
        .stages {
            float: left;
        }
        
        .vl {
            border-left: 6px solid #4285F4;
            box-sizing: border-box;
        }
        
        .circle {
            background: white;
            width: 32px;
            height: 32px;
            line-height: 32px;
            border-radius: 16px;
            position: relative;
            top: 0px;
            left: 19px;
            color: white;
            text-align: center;
        }
        
        .clear {
            clear: left;
        }          
        
/*

==============================================================

*/
       
       
* {
            padding: 0px;
            margin: 0px;
            outline: none;
            /*
            font: 16px "Calibri";
            font-weight: lighter;
            */ 
            list-style-type: none;
            /*
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;            
            box-sizing: border-box;
            */                                   
        }

        /*
        body {
            background: #e39900;
            overflow: hidden;
            overflow-y: auto;
            color: #bbb;
        }
        */

        .controls {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #fff;
            z-index: 1;
            padding: 6px 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }

        button {
            border: 0px;
            color: #e13300;
            margin: 4px;
            padding: 4px 12px;
            cursor: pointer;
            background: transparent;
        }

        button.active,
       ...

JavaScript

var tree = {
            "__itl__15d1ec9e_6eb9_4fa6_a9ed_05520c3274da": {
                "id": "15d1ec9e-6eb9-4fa6-a9ed-05520c3274da",
                "idITL": "__itl__15d1ec9e_6eb9_4fa6_a9ed_05520c3274da",
                "childNodes": [
                    "__itl__c9a63aa0_aaa2_11e8_82f5_309c23a0dca7",
                    "__itl__c9a63aa1_aaa2_11e8_82f5_309c23a0dca7",
                    "__itl__c9a63aa2_aaa2_11e8_82f5_309c23a0dca7"
                ],
                "type": "DMComplexBusinessProcess",
                "innerText": "Заполнение паспорта проекта",
                "complete": false
            },
            "__itl__c9a63aa0_aaa2_11e8_82f5_309c23a0dca7": {
                "id": "c9a63aa0-aaa2-11e8-82f5-309c23a0dca7",
                "idITL": "__itl__c9a63aa0_aaa2_11e8_82f5_309c23a0dca7",
                "childNodes": [],
                "type": "DMBusinessProcessPerformance",
                "innerText": "Заполнить поля",
                "complete": false
            },
            "__itl__c9a63aa1_aaa2_11e8_82f5_309c23a0dca7": {
                "id": "c9a63aa1-aaa2-11e8-82f5-309c23a0dca7",
                "idITL": "__itl__c9a63aa1_aaa2_11e8_82f5_309c23a0dca7",
                "childNodes": [],
                "type": "DMBusinessProcessPerformance",
                "innerText": "Прикрепить протокол",
                "complete": false
            },
            "__itl__c9a63aa2_aaa2_11e8_82f5_309c23a0dca7": {
                "id": "c9a63aa2-aaa2-11e8-82f5-309c23a0dca7",
                "idITL": "__itl__c9a63aa2_aaa2_11e8_82f5_309c23a0dca7",
                "childNodes": [],
                "type": "DMBusinessProcessPerformance",
                "innerText": "Прикрепить презентацию",
                "complete": false
            },
            "__itl__a994b46c_b370_42f3_a730_e588dbd9a40e": {
                "id": "a994b46c-b370-42f3-a730-e588dbd9a40e",
                "idITL": "__itl__a994b46c_b370_42f3_a730_e588dbd9a40e",
               ...