JSFiddle - React, Tailwind, and code Playground

HTML

<div class="subcontainer"> <a href="http://tinypic.com?ref=2ur6rk1" target="_blank" class="imgcolumn"><img src="http://i61.tinypic.com/2ur6rk1.png" border="0" alt="Image and video hosting by TinyPic"> <h3 class="header3">Motivate Yourself</h3></a>

    

</div>

CSS

.subcontainer {
     width: 100%;
     height: 100%;
     float: left;
     
     border: 3px solid white;
 }
 .imgcolumn {
     background-repeat: no-repeat;
     float: left;
     width: 257px;
     height: 257px;
     margin-left: 130px;
     margin-top: 45px;
position: relative;
    
 }
 .header3 {
     z-index: 100;
     position: absolute;
     float:right;
     color: black;
     font-size: 25px;
     text-align: center;
    position:absolute;
    width:80%;
    height:45%;
    background-color:rgba(0,0,0,0.4);
    top:20px;
    left:24px;
    line-height:150px;
    
 }