JSFiddle - React, Tailwind, and code Playground

by Ben

HTML

<div class="wrapper">
    <p>Some text and descriptions</p>
    <div class="widget">
        <div class="box"></div>
    </div>
    <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p>
</div>

CSS

.wrapper { 
    width:300px; 
    display:block; 
    position:relative;
    overflow:hidden;
    background-color:gray;
}
.widget {
    width:300px;
    height:300px;
    display:block;
    position:relative;
    background-color:green;
}
.box {
    width:100px;
    height:100px;
    position:absolute;
    left:250px;
    top:50px;
    background-color:red;
    visibility:visible;
}
.fix {
    left:258px;
    top: 108px;
}

JavaScript

$(".widget").parent().after('<div class="box fix"></div>');