JSFiddle - React, Tailwind, and code Playground

by _jro

HTML

<div class="w">
    <div class="applewrap">
        <div class="col"><img src="http://f.cl.ly/items/371Z3f0u0U1y2b3Z281o/buystrip_hero.png" alt="Apple strip"></div>
        
        <div class="col">
            <h2>Some Text</h2>
            <p>This demonstration has to contain some type of content. So, here it is. I'm sure it all looks real fancy.</p>
        </div>
        
        <div class="col last">
            <h2>OSX Release Promo</h2>
            <img src="http://f.cl.ly/items/3y2s0W0t2I1w0R110u2H/promo_mountain_lion.png" alt="OSX Mountain Lion">
        </div>
    </div>
</div>

CSS

.w { width: 850px; padding: 10px 8px; }
.applewrap {
width: 100%;
display: block;
height: 150px;
background: white;
border: 1px solid;
border-color: #e5e5e5 #dbdbdb #d2d2d2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}


.applewrap .col {
float: left;
box-sizing: border-box;
width: 250px;
height: 150px;
padding: 16px 7px 6px 22px;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #343434;
border-right: 1px solid #dadada;
}
.applewrap .col.last { width: 350px; border-right-color: #fff; }
.applewrap .col.last img { float: right; position: relative; top: -20px; }
.applewrap .col h2 { font-size: 15px; margin-bottom: 4px; font-weight: bold; }