JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!---
 - generate_sections(data, sectionType, targetSection) -> capable to generate sections (Rows or Columns).
 - create_div(id, title, width, color)                 -> capable to generate DIVs including ID, LABEL, COLOR and WIDTH.
 - check_repeatedBoxLogic(data1, data2)                 -> capable to create repeated DIV-Blocks (repeater-function) for DATA.
--->

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Dynamic Divs</title>          
            <script>
                let arrayNotes=[];
                let mapTasks = new Map(); //console.log(mapTasks);
                let generalShader = '0 3px 5px rgba(0, 0, 0, 0.4)';
                let sectionColor = 'lightgrey';
                let repBgColor = 'linear-gradient(to right, rgba(200,100,255,0.5), rgba(25,150,255,0.5), rgba(255,200,255,0.5))';
                //--------------
                let padValue =  '5px';
                let marValue =  '5px';
                let borRadius = '5px';
                let counterRows = 0;
                let counterNote = 0;        
                let iconSizeX = 25;
                let iconSizeY = 25;
                //-------------------------------------
                function create_div(id, title, width, color) {
                const div = document.createElement('div');
                    div.id = id;
                    div.classList.add(id);              
                    div.style.width = `${width}px`;
                    div.style.display = 'flex';
                    div.style.alignItems = 'center';
                    div.style.justifyContent = 'center';
                    if (title)  {div.textContent = title;}
                    if (color)   {div.style.backgroundColor = color;} else {div.style.background = repBgColor;}
                    return div;
                }                         

           ...