JSFiddle - React, Tailwind, and code Playground

by Dakota Martinez

HTML

<div class="winner-container"><div class="winner"><div class="su-posts su-posts-full-posts-loop">
	
				<div id="su-post-488" class="su-post">
										<h2 class="su-post-title"><a href="http://test.breakingtradition.net/thanksgiving-dinner-with-family/">Thanksgiving Dinner with Family</a></h2>
					<div class="su-post-meta">Posted: September 29, 2014</div>
					<div class="su-post-content">
						<p>I love getting together with the people I love to celebrate.  It&#8217;s always a blast to get together and see everyone.  We have lots of people in my family and there is always lots of food and plenty of stories to go around!  I&#8217;m excited for this year! &#8211;Dakota</p>
					</div>
					<a href="http://test.breakingtradition.net/thanksgiving-dinner-with-family/#comments" class="su-post-comments-link">0 comments</a>
				</div>

    </div></div></div>

CSS

.winner-container {
    width: 100%;
    max-width: 600px;
    max-height: 414px;
    padding-bottom: 69%;
    position: relative;
    margin: auto;
    overflow: hidden;
}
.winner-container > .winner {
     position: absolute;
     top: 0; bottom: 0; right: 0; left: 0;
     background-image: url('http://test.breakingtradition.net/wp-content/uploads/2014/10/winner-of-the-week-600w.jpg');
     background-repeat: no-repeat;
     background-size: contain;
 }

.winner .su-post {
    margin: 15% 10% 20% 10%;
}