JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="content">
<img class="imgstyle" src="http://www.facticemagazine.com/newsletter/img/test/1.jpg" />
      
<div class="textcontent">

<div class="hr"></div>
<h1 class="textstyle1">Keep them<br/>closed</h1>
<p style="textstyle2">Helen Molsted by Arron Dunworth<br/>Exclusive / November 11, 2016</p>
<p class="textstyle3">Read more ></p>

</div>

</div>

CSS

.content { display:inline-block; width:100%; max-width:800px; margin: 0px auto 75px }

.imgstyle { float: left; max-width: 800px; width:100%; }

.textcontent { text-align: left; display: inline-block; margin: 0 auto; max-width: 300px; position: absolute; left: 0px; right: 0px; z-index: 1000; width:100%; }

.hr { height:1px; width:50px; background:#282828; }

.textstyle1 { font-family: 'GFS Didot', serif; font-weight: 300; text-align:left; margin-top:30px; font-size:40px; }

.textstyle2 { text-align: left; line-height:21px; margin-top:20px; }

.textstyle3 { text-align: left; line-height:21px; font-weight:700 }