JSFiddle - React, Tailwind, and code Playground

by Dmitry Ieremenko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.umd.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <svg width="1000" height="1000"></svg> -->
<link href="https://fonts.googleapis.com/css?family=Maven+Pro|Asap|ontserrat|Archivo+Narrow|Fira+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>


<form id="optoins-form">
    <div class="form-check">
        <input type="checkbox" name="dnd" class="form-check-input" id="option-dnd">
        <label class="form-check-label" for="option-dnd">Drag'n'drop</label>
    </div>
    <div class="form-check">
        <input type="checkbox" name="collisions" class="form-check-input" id="option-collision">
        <label class="form-check-label" for="option-collision">Resolve nodes collision</label>
    </div>
    <div class="form-check">
        <input type="checkbox"...

CSS

.node,
.node-core {
    cursor: pointer;
}

.node-text-core {
    font-family: 'Maven Pro', sans-serif;
}

.node-text-core.strong {
    font-weight: bold;
}

.node-text {
    font-family: 'Maven Pro', sans-serif;
}

.strong {
    font-weight: bold;
}

.link {
    font-family: 'Maven Pro', sans-serif;
}

.link.clickable {
    cursor: pointer;
    text-decoration: underline;
}

.link.clickable:hover {
    font-size: 105%;
}

.separator {
    font-family: 'Maven Pro', sans-serif;
}

.sidebar {
    position: absolute;
    margin-top: 50px;
    width: 250px;
    height: 800px;
}

.sidebar .name {
    font-size: 30px;
    font-family: 'Fira Sans', sans-serif;
}

.sidebar .desc {
    font-family: 'Fira Sans', sans-serif;
}

.sidebar .desc .desc-dep,
.sidebar .desc .desc-interest {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

.sidebar .desc .desc-dep:hover,
.sidebar .desc .desc-interest:hover {
    font-size: 105%;
}

JavaScript

const CompanyName = 'MindK';

const Interests = [{
        name: "Football",
        desc: "Football desc"
    },
    {
        name: "Photography",
        desc: "Photography desc"
    },
    {
        name: "Reading Books",
        desc: "Reading Books desc"
    },
    {
        name: "Travelling",
        desc: "Travelling desc"
    },
    {
        name: "Boxing",
        desc: "Boxing desc",
    },
    {
        name: "Movies",
        desc: "Movies desc",
    },
    {
        name: "Theatre",
        desc: "Theatre desc",
    },
    {
        name: "Camping",
        desc: "Camping Desc"
    },
    {
        name: "Crossfit",
        desc: "Crossfit desc"
    },
    {
        name: "Cycling",
        desc: "Cycling desc"
    },
    {
        name: "Painting",
        desc: "Painting desc"
    },
    {
        name: "Cars",
        desc: "Cars desc"
    },
];

const Positions = [{
        name: "Chief",
        desc: "Chief Desc"
    },
    {
        name: "Tech Lead",
        desc: "Tech Lead desc"
    },
    {
        name: "Dev",
        desc: "Dev desc"
    },
    {
        name: "QA Engineer",
        desc: "QA Engineer desc"
    },
    {
        name: "PM",
        desc: "PM desc"
    },
    {
        name: "Designer",
        desc: "Designer desc"
    },
    {
        name: "Dev Ops",
        desc: "Dev Ops desc"
    },
]

const Departments = [{
        name: "Managers",
        desc: "Managers desc"
    },
    {
        name: "Finances",
        desc: "Finances desc",
    },
    {
        name: "Developers",
        desc: "Developers desc",
    },
    {
        name: "QA",
        desc: "QA desc"
    },
    {
        name: "Designers",
        desc: "Designers desc"
    },
    {
        name: "Dev Ops",
        desc: "Dev Ops desc"
    },
    {
        name: "Front-end Developers",
        desc: "Front-end Developers desc"
    },
]

const Employees = [{
        id: 1,
        name: "Oleg Nesterov",
        position: "Chief",
        avatar:...