JSFiddle - React, Tailwind, and code Playground

by sulfureous

HTML

<article>
	<figure style="background-image: url(http://fineartamerica.com/images-medium/count-the-squares-ron-brown.jpg);"></figure>
	<p>
		Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Proin eget tortor risus.
	</p>
</article>
<article>
	<figure style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/c/ca/Larix_decidua_Aletschwald.jpg);"></figure>
	<p>
		Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.
	</p>
</article>
<article>
	<figure style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/07/WisconsinScenery.jpg);"></figure>
	<p>
		Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada. Nulla quis lorem ut...

CSS

article {
    overflow: auto;
    background-color: #EEE;
    border: 1px solid #CCC;
    margin: 1em 0;
}

article > figure {
    width: 33%;
    float: right;
    margin: 1em;
    padding-top: 33%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: red;
    box-sizing: border-box;
    box-shadow: 0px 0px 4px 2px #888;
}

article > p {
    margin: 1em 1em 0;
}