JSFiddle - React, Tailwind, and code Playground
HTML
<!--
<img src="http://i.imgur.com/Fk8A9.png"/>
<img src="http://i.imgur.com/B3Z4K.png"/>
-->
<div id="container">
<div class="box">
<h2>First box</h2>
<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
</div>
<div class="box">
<h2>Second box</h2>
<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
</div>
<div class="box">
<h2>Third box</h2>
<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
</div>
<div style="clear: both;"></div>
</div>
CSS
body { font-family: Georgia; font-size: 80%; }
p { text-align: justify; }
#container {
background: #400;
padding: 2em;
}
.box {
margin-left: 50px;
padding: 1em;
position: relative;
background: #bababa;
width: 15em;
float: left;
}
.box:before {
position: absolute; top: 0; bottom: 0;
left: -50px;
width: 100%;
height: 100%;
content: " ";
background: url('http://i.imgur.com/Fk8A9.png') no-repeat left center;
}
.box:after {
position: absolute; top: 0; bottom: 0;
right: -50px;
height: 100%;
width: 100%;
content: " ";
background: url('http://i.imgur.com/B3Z4K.png') no-repeat right center;
}
.box:first-child { margin-left: 0; }
.box:first-child:before { background: none; }
.box:nth-last-child(2):after { background: none; }