JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <section class="sectionProject">
            <h3>Portfolio</h3>
            <ul id="gallery">
                <li>
                    <a href="#">
                        <img src="http://placehold.it/350x150" alt="">
                        <p>Experimentation with color and texture.</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://placehold.it/350x150" alt="">
                        <p>Playing with blending modes in Photoshop.</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://placehold.it/350x150" alt="">
                        <p>Experimentation with color and texture.</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://placehold.it/350x150" alt="">
                        <p>Playing with blending modes in Photoshop.</p>
                    </a>
                </li>
                    <li>
                    <a href="#">
                        <img src="http://placehold.it/350x150" alt="">
                        <p>Experimentation with color and texture.</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://placehold.it/350x150" alt="">
                        <p>Playing with blending modes in Photoshop.</p>
                    </a>
                </li>
            </ul>
        </section>
        <footer class="clearfix">
            <p>&copy; 2015</p>
        </footer>
    </div>

CSS

#wrapper {
    max-width: 320px;
    margin: 0 auto;
    padding: 0 5%;
}

img { max-width: 100%; }

h3 {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 20px;
    margin-bottom: 30px;
}

section { padding: 80px 0; }

.sectionProject {
    background-color: #348AC7;
    text-align: center;
}

.clearfix { clear: both; }

/* ---------------------------------------------- */
/* Portfolio */
/* ---------------------------------------------- */

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7
}

/* ---------------------------------------------- */
/* Footer */
/* ---------------------------------------------- */

footer {
    background-color: #202532 ;
    text-align: center;
    font-size: 50%;
    padding: 5%;
    color: #515b6b;
}