JSFiddle - React, Tailwind, and code Playground

by A Lee

HTML

<script src="@font-face {   font-family: &#39;Radley&#39;;   font-style: normal;   font-weight: 400;   src: local(&#39;Radley&#39;), url(http://themes.googleusercontent.com/static/fonts/radley/v6/bwcnq0NKbe23EJptQrqsFuvvDin1pK8aKteLpeZ5c0A.woff) format(&#39;woff&#39;); } @font-face {   font-"></script>
<div class="photo-body">
    <div class="top-photo-large">
        <img src="http://us.123rf.com/400wm/400/400/glopphy/glopphy1204/glopphy120400052/13159561-bling-bling-word-vector.jpg" />
    </div>
    
    <div class="bottom-half-photo-body cf">
        <div class="photo-small first">
            <div class="inner">
                <img src="" />
            </div>
        </div>
        
        <div class="photo-small">
            <div class="inner"></div>
        </div>
        
        <div class="photo-small last">
            <div class="inner"></div>
        </div>
    </div>
</div>

CSS

.cf:before, .cf:after {
    content:" ";
    /* 1 */
    display: table;
    /* 2 */
}
.cf:after {
    clear: both;
}
body {
    background-color: #996600;
    font-family:'Radley', serif;
    font-style: italic;
}
.top-nav {
    width: 960px;
    margin: 0 auto;
}
.top-nav .logo-top-nav {
    display: inline-block;
}
.top-nav .buttons-top-nav {
    display: inline-block;
    width: 700px;
    float: right;
    border: 5px gold solid;
    background-color: #d2b132;
}
.top-nav .buttons-top-nav .ul-float-left ul {
    margin-right: 60px;
    list-style-type: none;
    text-align: center;
}
.top-nav .buttons-top-nav .ul-float-left ul li {
    display: inline-block;
    padding: 0 45px;
    font-size: 25px;
}
.photo-body {
    width: 800px;
    padding: 25px;
    margin: 0 auto;
    background: #d2b132;
}
.photo-body .top-photo-large img {
    width: 100%;
}
.photo-body .bottom-half-photo-body {
    padding-top: 20px;
}
.photo-body .bottom-half-photo-body .photo-small-left {
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
}
.photo-body .bottom-half-photo-body {
    margin: 0 auto;
    text-align: center;
}
.photo-body .bottom-half-photo-body .photo-small {
    float: right;
    width: 33.3%;
    padding: 0;
    margin: 0;
}
.photo-body .bottom-half-photo-body .photo-small .inner {
    min-height: 50px;
    margin: 0 15px;
    background: red;
}
.photo-body .bottom-half-photo-body .photo-small.first .inner {
    margin-right: 0;
}
.photo-body .bottom-half-photo-body .photo-small.last .inner{
    margin-left: 0;
}

.bottom-half-photo-body{
    margin: 0 auto;
}