JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <span><img src="http://alpatriott.ru/works/primer/images/5.png" alt=""></span>
</div>

CSS

.content{
display:table-cell;
border:1px solid blue;
width:450px;
height:400px;
vertical-align:middle;
text-align:center;
position:relative;
}

.content:before{
position:absolute;
display:block;
content:'Январь';
left:0px;
top:0px;
width:100%;
height:20px;
background:blue;
color:#fff;
font-weight:bold;
}

.content:after{
position:absolute;
display:block;
content:'N45';
left:0px;
top:300px;
width:100%;
height:20px;
color:blue;
font-weight:bold;
}

span{
position:relative;
cursor:pointer;
}

span:before{
position:relative;
display:block;
content:'левая';
left:-80px;
top:-40px;
width:60px;
height:20px;
background:#ff0000;
}

span:after{
position:relative;
display:block;
content:'правая';
left:90px;
top:-40px;
width:60px;
height:20px;
background:#ff0000;
}