JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="border_area">
        <div id="work_area">            
                <div id="div_top"></div>
                <div class="div_vertical" id="div_left"></div>
                <div class="div_vertical" id="div_right"></div>
                <div id="div_bottom"></div>
        </div>
        <div class="props">
            <div class="prop" id="prop_1"></div>
            <div class="prop" id="prop_2"></div>
        </div>
    </div>
    <input class="input" type="number" id="width"/><br>
    <input class="input" type="number" id="height"/><br>
    <input class="input" type="number" id="led"/><br>
    <input class="input" type="button" value="Send" onclick="send()"/
    </body>
</html>

CSS

#border_area {
    width: 200px;
    height: 200px;
    background-color: white;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
 
#work_area {
    width: 100%;
    height: 100%;
    background-color: black;
    flex-flow: column;
    position: relative;
}
 
#div_top {
    width: 200px;
    height: 10px;
    display: flex;
}
 
#div_right {
    height: 180px;
    width: 10px;
    position: absolute;
    right: 0;
}
 
#div_left {
    height: 180px;
    width: 10px;
    opacity: 0.3;
    background-color: gold;
    position: absolute;
    left: 0;
}
 
#div_bottom {
    width: 200px;
    height: 10px;
    opacity: 0.3;
    background-color: cyan;
    bottom: 0;
    position: absolute;
}
 
.input {
    margin-top:20px
}
 
.props {
    display: flex;
}
 
#prop_1 {
    width: 40px;
    height: 100px;
    background-color: white;
    margin-left: 0;
    transform: translate(0, -100%);
    visibility: hidden;
}
 
#prop_2 {
    width: 40px;
    height: 100px;
    background-color: white;
    margin-left: 0;
    transform: translate(0, -100%);
    right: 0;
    visibility: hidden;
}
 
img {
    width: 18px;
    height: 20px;
}

JavaScript

function send() { 
 
            // document.getElementById("#div_top").innerHTML = "";
            $("#div_top").html("");
 
            let [WP, HP] = [Number(document.querySelector('#width').value), Number(document.querySelector('#height').value)];
            
            if (WP <= 0) {
                WP = 200;
            }
            if (HP <= 0) {
                HP = 200;
            }
            document.querySelector('#border_area').style.width = WP+'px';
            document.querySelector('#border_area').style.height = HP+'px';
            
            document.querySelector('#div_top').style.width = WP+'px';
            document.querySelector('#div_left').style.height = HP-20+'px';
            document.querySelector('#div_right').style.height = HP-20+'px';
            document.querySelector('#div_bottom').style.width = WP+'px';
            
            function setStyles(element_id, WP, HP, X) {
                const element = document.getElementById(element_id)
                const marginLeft = WP/X-5
 
                element.style.height = `${HP}px`
                element.style.marginLeft = `${marginLeft}`
                element.style = `visible`;
            }
 
            if (WP >= 200 && WP < 300) {    
                setStyles('prop_1', WP, HP, 2)    
            } else if (WP >= 300 && WP <= 400) {
                setStyles('prop_1', WP, HP, 3)
                setStyles('prop_2', WP, HP, 3)
            }
 
            let MQL = Math.floor(((2*(WP+HP))/18));
 
            let MQL_for_top = Math.floor(WP/18);
            let MQL_for_right = Math.floor(HP/18);
            let MQL_for_bottom = Math.floor(WP/18);
            let MQL_for_left = Math.floor(HP/18);
 
            let DQL = Number(document.querySelector('#led').value);
            if (DQL > MQL) {
                $("#led").val(MQL);                  
                DQL = MQL;
            }
            if (DQL <= 0) {
                $("#led").val("0");
                DQL = 0;
...