JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<my-custom-element></my-custom-element>

JavaScript

let projectsData, projects = [{tasks:[]}], arrayNotes=[], arrayVisible = [];
            //---------------
            let generalShader = '';
            let sectionColor =  ''; //'rgba(55, 130, 220, 0.5)';
            let repBgColor = '';
            //let divNoteColor = 'rgba(10, 200, 250, 0.3)';
            let sectionScale = 99;
            //--------------
            let repBorder = '1px solid black';
            let padValue =  '5px';
            let marValue =  '2px';
            let borRadius = '5px';
            let counterRows = 0;  
            //------------  
            let animation = true
            //------------ 
            let iconSizeX = 25;
            let iconSizeY = 25;
            //------------
            var checkBoxWidth = 20;
            var checkBoxHeight = 20;
            //------------------------------------- 
class MyCustomElement extends HTMLElement {
  constructor() {
    super(); console.log('Custom-Element ready...')
    // Initialize your custom element
    this.attachShadow({ mode: 'open' }); // Attach a shadow DOM
    const shadowDom = this.shadowRoot; // Reference to the shadow DOM  
    
   	document.addEventListener("DOMContentLoaded", async function() {
     //--------------------------------------------------------------------------
    const headData =    {"header": {"width": [99], "ids": ["divHeaderTitle"], "titles": [""], "colors": ["blue"]}}; 
    const itemData =    {"item": {"width": [99], "ids": ["item"], "titles": ["item"], "colors": ["lightblue"]}};  
    const repData =     {"repeater": {"width": [99], "ids": ["divRepTitle"], "titles": [""], "colors": [""]}}; 
    const data_Note =   {"note": {"width": [80], "ids": ["divNote"], "titles": [""], "colors": ['rgba(255,255,255,0.5)']}}; 
    const basicData1 =  {
      "section1": {
        "width": [10, 80, 'auto'],
        "ids": ["divTasksTotalTitle", "divToDoList", "divMenuTop"],
        "titles": ["Tasks-Total", "To-Do-List", ""],
        "colors":...