JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div>
        blah blah blah
    </div>
    <div class="box1">
        <div class="box2">
            <a href="#">
                <div class="box3"></div>
            </a>
        </div>
    </div>
</body>

CSS

.box1
{
    background-color: #00ff00;
}

.box2
{
    z-index: 10;
    position: relative;
    min-width: 200px;
    min-height: 200px;
}

.box3
{
    position: absolute; 
    width:200px; 
    height: 200px; 
    border: 3px solid #990000;
}

JavaScript

var can = $('<canvas></canvas>').css({
    'top': '0px',
    'left': '0px',
    'height': '210px',
    'width': '210px',
    'position': 'absolute',
    'zIndex': '0',
    'background-color': 'yellow'
});

$('body').prepend(can);