JSFiddle - React, Tailwind, and code Playground

by bhatnagar018

HTML

<div id="container">
    <img id="image" src="http://www.picgifs.com/clip-art/cartoons/popeye/clip-art-popeye-004734.jpg" />
    <div id="dd">
        <p id="text">Hello World!</p>
    </div>
</div>

CSS

#container {
    height:400px;
    width:400px;
    position:relative;
    background:#00ffbb;
    z-index:-100
}
#image {
    position:absolute;
    /*    left:0;
    top:0;*/
    padding:5%;
    height:350px;
    width:350px;
}
#text {
    z-index:100;
    position:absolute;
    color:#000000;
    font-size:24px;
    font-weight:bold;
    float:left;
    background:rgba(0, 0, 0, 0.5);
    /*left:150px;*/
    top:300px;
    width:150px;
    padding-left:2%;
}
#dd {
    z-index:1;
    padding-left:3%;
}