JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panel4" class="panels" style="cursor: move; z-index: 48">
		<div class="title">TITLE | THIS IS THE TITLE</div>
		<div id="picture4">
            <p>Your text</p><img src="http://i.imgur.com/fbEGCcY.png" width="480" height="360"></div>
		<div class="footer">FOOTER | THIS IS THE FOOTER</div>
	</div>

CSS

.panels {
	position: absolute;
}

#panel4 {
	display: inline-block;
	position: relative;
}

.title {
	position: absolute;
	font-family: Monaco;
	font-size: 10px;
	line-height: 20px;
	text-align: left;
	height: 20px;
	color: #fff;
	background: #000000;
	width: 100%;
	text-indent: 6px;
}

.footer {
	position: absolute;
	font-family: Monaco;
	font-size: 10px;
	line-height: 20px;
	text-align: right;
	bottom: 0;
	color: #fff;
	background: #000000;
	width: 100%;
}
#picture4 img{
    z-index:-2;
}
#picture4 p{
    z-index:2;
    position:absolute;
    line-height:360px;
    height:360px;
    width:480px;
    text-align:center;
    vertical-align:middle;
    color:red;
    font-size:22px;
}