JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content"> 

<div class="card"><img src="http://fs2.directupload.net/images/150324/5o67fxoe.png" alt=""/><h3>Headline 01</h3><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>

<div class="card"><img src="http://fs2.directupload.net/images/150324/5o67fxoe.png" alt=""/><h3>Headline 02</h3><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>

<div class="card"><img src="http://fs2.directupload.net/images/150324/5o67fxoe.png" alt=""/><h3>Headline 03</h3><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>

<div class="card"><img src="http://fs2.directupload.net/images/150324/5o67fxoe.png" alt=""/><h3>Headline 04</h3><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>

<div class="card"><img src="http://fs2.directupload.net/images/150324/5o67fxoe.png" alt=""/><h3>Headline 05</h3><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>

<div class="card"><img src="http://fs2.directupload.net/images/150324/5o67fxoe.png" alt=""/><h3>Headline 06</h3><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>

</div> 

<div id="footer"></div>

CSS

html,body{padding:0;margin:0;width:100%;height:100%}
#content, .card, #footer{display:block;padding:0;margin:0}
#content{width:100%;max-width:1200px;min-width:320px;height:900px;position:relative;margin:0 auto}

.card{width:31.3%;height:300px;margin:0 1%;position:absolute}
.card img{display:block;margin:10px;float:left;border:1px solid #ddd;box-shadow:0 12px 8px -12px rgba(0,0,0,0.7)}
.card h3{color:#b05454;margin:0;padding:0;position:relative;top:50px; text-decoration:underline}
.card p{display:block;clear:left;padding:0 20px;margin:0;font:normal 15px/22px}

.card:nth-of-type(1){left:0;top:50px;}
.card:nth-of-type(2){left:33.3%;top:50px;}
.card:nth-of-type(3){left:66.6%;top:50px;}
.card:nth-of-type(4){left:0;top:350px;}
.card:nth-of-type(5){left:33.3%;top:350px}
.card:nth-of-type(6){left:66.6%;top:350px}

#footer{width:100%;min-width:320px;position:fixed;height:30px;bottom:0;left:0;text-align:center; border-top:2px solid #515151; background:#fff}


@media only screen and (max-width:1024px) {
#content{height:1200px}
.card{width:48%}
.card:nth-of-type(1){left:0;top:50px}
.card:nth-of-type(2){left:50%;top:50px}
.card:nth-of-type(3){left:0;top:350px}
.card:nth-of-type(4){left:50%;top:350px}
.card:nth-of-type(5){left:0;top:650px}
.card:nth-of-type(6){left:50%;top:650px}
}
@media only screen and (max-width:1024px) and (orientation:portrait) {
#content{height:1750px}
.card{width:98%}
.card:nth-of-type(1){left:0;top:50px}
.card:nth-of-type(2){left:0;top:350px}
.card:nth-of-type(3){left:0;top:650px}
.card:nth-of-type(4){left:0;top:950px}
.card:nth-of-type(5){left:0;top:1250px}
.card:nth-of-type(6){left:0;top:1550px}
}
@media only screen and (max-width:480px) {
#content{height:1750px}
.card{width:98%}
.card:nth-of-type(1){left:0;top:50px}
.card:nth-of-type(2){left:0;top:350px}
.card:nth-of-type(3){left:0;top:650px}
.card:nth-of-type(4){left:0;top:950px}
.card:nth-of-type(5){left:0;top:1250px}
.card:nth-of-type(6){left:0;top:1550px}
}