JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"><img src="http://i35.tinypic.com/69kdw8.jpg" border="0" alt="Image and video hosting by TinyPic"><div id="d1">Test</div><div id="d2">Test test2</div></div>

CSS

*{
    width:100%;
    height:100%;
}
#container {
    width:100%;
    height:50%;
    position:relative;
}
#d1 {
    position:absolute;
    height:16%;
    width:39%;
    bottom:0;
    left:0;
    background-color:green;
    opacity:0.7;
    color:white;
}
#d2 {
    position:absolute;
    height:68%;
    width:29%;
    top:0;
    left:58%;
    background-color:green;
    opacity:0.7;
    color:white;
}