JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1">
    1
    <div id="inner1">1</div>
</div>

<div id="box2">
    2
    <div id="inner2">2</div>
</div>

CSS

#box1, #box2 {
    width: 100px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
}
#box1 {
    background: green;
    position: relative;
}
#box2 {
    background: blue;
}

#inner1, #inner2 {
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
   
    background: black;
    opacity: 0.5;
    color: white;
    text-align: center;
    line-height: 50px;
}