JSFiddle - React, Tailwind, and code Playground

by georgesarkisss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">

$(function() {
var DigitalSelectionlist= ['D0','D1','D2',"D3","D4"]; 
var categories = [];
var Setpoint= [];
var Setpointstart= -20;
var Setpointend= 150;
var Setpointinc = 5;
var setpointlength = parseInt(Math.abs((Setpointstart-Setpointend)/Setpointinc)); 
for (var i = 0; i <= setpointlength; i++) {
    Setpoint[i] = (Setpointinc*i) + Setpointstart ;
    categories[Setpoint[i]]= ["1","2","3","4","5"];
    }
var Analogstart= 0;
var Analogend= 16;
var Analoginc = 1;
var Analoglength = parseInt(Math.abs((Analogstart-Analogend)/Analoginc)); 
var AnalogSelectionlist= [];


for (var i = 0; i <= Analoglength; i++) {
    AnalogSelectionlist[i] = "A" + ((Analoginc*i)+ Analogstart) ;
}






  categories["startList"] = ["Input","Output"];        // Level 1  (True|False is 1 level only)
categories["Input"] = ["Analog","Digital"];                         // Level 2
 categories["Analog"] = ["A_Temperature","A_Current"];                    // Level 3
   categories['A_Temperature'] = ['5000K','1000K','3.3K',"40K"];         //  Level 4
     categories['A_Current'] = ['White','Red','Grey'];                      //  Level 4
categories['5000K'] = AnalogSelectionlist;         //  Level 5
 categories['1000K'] =  AnalogSelectionlist;         //  Level 5   
  categories['3.3K'] =  AnalogSelectionlist;       
   categories['40K'] =  AnalogSelectionlist;               
    categories['White'] =  AnalogSelectionlist; 
     categories['Red'] =  AnalogSelectionlist;   
      categories['Grey'] =  AnalogSelectionlist;   
       
categories["Digital"] = ["D_Temperature","Humidity"];             // Level 3
    categories["D_Temperature"] = ["Black","BLUE","Gold"];             // Level 4 only    
     categories["Humidity"] = ["Big","Small"];   
 categories["Black"] = DigitalSelectionlist;     // Level3 
  categories["BLUE"] = DigitalSelectionlist;     //...

CSS

.DDlist { display:none; }
body {
    background-color: lightblue;
}

.Del {
    display: inline-block;
    position:absolute;
    Right:80px; 

  }
.NOSD {cursor: not-allowed;
  background-color: #D6EAF8;}

body {
    counter-reset: section;
}

form::before {
    counter-increment: section;
    content: "S" counter(section) "- ";
}
form {
    border-bottom: 1px solid  ;
    border-color: #2E86C1;
}

textarea {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #D6EAF8;
}

input[type=text]:focus {
    background-color: lightgreen;
}

select[name="dropy"] {
 background-color: #D6EAF8;;
  
  }

.APIS{
  background-color: #D6EAF8;
}

.adds {
  background-position: center;
  transition: background 0.8s;
}
.adds:hover {
  background: #58D68D radial-gradient(circle, transparent 1%, #58D68D 1%) center/15000%;
}
.adds:active {
  background-color: #196F3D;
  background-size: 100%;
  transition: background 0s;
}

/* Button style */
.adds {
  border: none;
  border-radius: 30px;
  padding: 6px 10px;
  font-size: 20px;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  background-color: #2ECC71;
  box-shadow: 0 0 4px #999;
  outline: none;
}




.remove {
  background-position: center;
  transition: background 0.8s;
}
.remove:hover {
  background: #EC7063 radial-gradient(circle, transparent 1%, #EC7063 1%) center/15000%;
}

.remove {
  border: none;
  border-radius: 30px;
  padding: 1px 20px;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  background-color: #CB4335;
  outline: none;
}
.sendbut {
  background-position: center;
  transition: background 0.8s;
}
.sendbut:hover {
  background: #5DADE2 radial-gradient(circle, transparent 1%, #5DADE2 1%) center/15000%;
}
.sendbut:active {
  background-color: #1F618D;
  background-size: 100%;
  transition: background 0s;
}
/* Button style */
.sendbut {
  border: none;
  border-radius: 30px;
  padding: 6px 10px;
  font-size: 20px;
 ...