JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://alexchen.info/brianfunshine/wp-content/themes/prominent/js/jquery-easing-1.3.pack.js"></script>
<div class="containerStripe">
    <div class="outerStripe">
        <div class="menu">
            <ul>
                <li class="people">
                    <div>
                        <a href="#people"></a>
                    </div>
                </li>
                <li class="landscapes">
                    <div>
                        <a href="#landscapes"></a>
                    </div>
                </li>
                <li class="nature">
                    <div>
                        <a href="#nature"></a>
                    </div>
                </li>
                <li class="abstract">
                    <div>
                        <a href="#abstract"></a>
                    </div>
                </li>
                <li class="urban">
                    <div>
                        <a href="#urban"></a>
                    </div>
                </li>
                <li class="people2">
                    <div>
                        <a href="#people2"></a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

div.containerStripe
{
    background-color: #666;
}

div.outerStripe
{
    background-color: White;
    margin: 0 auto;
    width: 702px
}

div.menu
{
    width: 700px;
    height: 200px;
    overflow: hidden;
}

ul
{
    margin: 0;
    padding: 0;
    height: 200px;
    width: 1400px;
    display: block;
    list-style: none;
    overflow: hidden;
}

ul > li
{
    float: left;
    margin: 0;
    width: 78px;
    height: 200px;
    background-color: White;
    background-position: 2px 0px;
    background-repeat: no-repeat;
}

ul > li > div
{
    position: relative;
}

ul > li > div > a
{
    position: absolute;
    width: 100%;
    height: 200px;
}

li.people, li.people2
{
    background-image: url(http://placehold.it/310x150);
}

li.landscapes
{
    background-image: url(http://placehold.it/310x150);
}

li.nature
{
    background-image: url(http://placehold.it/310x150);
}
li.abstract
{
    background-image: url(http://placehold.it/310x150);
}

li.urban
{
    background-image: url(http://placehold.it/310x150);
}
li.people2
{
    width: 310px;
}

JavaScript

var $j = jQuery.noConflict();

$j(document).ready(function() {
    /**
     * jQuery Accordion
     */

    $j('ul > li').not(".people2").hover(function() {
        // if the element is currently being animated (to a easeOut)...
        if ($j(this).is(':animated')) {
            $j(this).stop().animate({
                width: "310px"
            }, {
                duration: 450,
                easing: "easeOutQuad"
            });
        } else {
            // ease in quickly
            $j(this).stop().animate({
                width: "310px"
            }, {
                duration: 400,
                easing: "easeOutQuad"
            });
        }
    }, function() {
        // on hovering out, ease the element out
        if ($j(this).is(':animated')) {
            $j(this).stop().animate({
                width: "78px"
            }, {
                duration: 400,
                easing: "easeInOutQuad"
            })
        } else {
            // ease out slowly
            $j(this).stop(':animated').animate({
                width: "78px"
            }, {
                duration: 450,
                easing: "easeInOutQuad"
            });
        }
    });
});