JSFiddle - React, Tailwind, and code Playground

HTML

<span>
<div>
    <top>
        TOP
    </top>
    
    <bottom>
        BOTTOM
    </bottom>
    
    <right>
        RIGHT
    </right>
    
    <left>
        LEFT
    </left>
</div>

</span>

CSS

span {
    position:relative;
}
div {
    margin:150px 100px 50px 50px;
    border: 1px solid Black;
    height:100px;
}
left,right,bottom,top {
    position: absolute;
    background:black;
    color:white;
    max-width:90px;
}
left{
    left:0;
}
right{
    right:0;
}
bottom {
    margin:0 auto;
    bottom:0;
    left:0;
    right:0;
}
top{
 margin:0 auto;
    top:0;
    left:0;
    right:0;
}