JSFiddle - React, Tailwind, and code Playground

by harsh dand

HTML

<div class="container-lp">
<div class="col-2-lp">
<h4><a href="#">Interior Decorating</a></h4>
<div class="overlay"><a href="#"><img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Interior-Decorating-Level-1B.jpg" alt="" /></a></div>
<div class="overlay"></div>
</div>
<div class="col-2-lp last-lp">
<h4 class="landing-page"><a href="#">Home Staging</a></h4>
<div class="overlay"><a href="#"><img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Home-Staging-Level-1B.jpg" alt="" /></a></div>
</div>
</div>

CSS

.container-lp 

{ width: 100%; max-width: 1280px; min-width: 320px; margin: 0 auto; clear: both; }

.col-2-lp 

{ float: left;  width: 45%; margin-right: 5%; }

.last-lp { margin-right: 0; }

.col-2-lp img {
width:100%;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {

.col-2-lp {
    width: 100%;
    float: none;
margin: auto;
  }

.last-lp {
margin-right: auto;
}

}