JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en-us">

<head>
        <title>Index</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--<meta http-equiv="X-UA-Compatible" content="IE=8" />-->


<script type="text/javascript">

        function getPosition(obj) {
                var topValue = 0, leftValue = 0;
                while (obj) {
                        leftValue += obj.offsetLeft;
                        topValue += obj.offsetTop;
                        obj = obj.offsetParent;
                }
                finalvalue = leftValue + "," + topValue;
                return finalvalue;
        }

function CreateDiv(obj) {

    var pos = getPosition(obj);
    var posarray = pos.split(",");
    var offset = obj.offsetHeight;
    var width = obj.offsetWidth;


    /* create & define div container */
    var newdiv = document.createElement('div');
    var divIdName = 'mDivCBox';
    newdiv.setAttribute('id', divIdName);

    newdiv.style.position = "absolute";
    newdiv.style.top = (parseInt(posarray[1]) + parseInt(1)) + 'px';
    newdiv.style.left = (parseInt(posarray[0]) + parseInt(1)) + 'px';
    newdiv.style.top = (parseInt(posarray[1])) + 'px';
    newdiv.style.left = (parseInt(posarray[0])) + 'px';
    newdiv.style.width = (parseInt(width)) + 'px';

    newdiv.innerHTML = '<div id="cbox_div"><ul id="cdiv_ul" class="cdiv_ul"><li>first item</li><li>second item</li><li>third item</li><li>four item</li></ul></div>';


    /* wrapper div container will contain our new div */
    var ni = document.getElementById('wrapper');
    ni.appendChild(newdiv);

    /* add specific padding-value */
    var select_ul = document.getElementById('cdiv_ul');
    select_ul.style.marginTop = parseInt(offset) + 'px';
}

</script>

<style type="text/css">



.cbox_div
{
    display:block;
    background-color:transparent;
}

.cdiv_ul {
    background:#aaa;
    list-style:none;
    border: 1px solid #000;
    border-top-width:0px;
   ...