JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="http://www.3magine.com/wp-content/themes/3magine/js/jquery.appear-1.1.1.modified.js"></script>
        <ul class="services animationBegin">
            <li class="imac-small" style="-webkit-transition: 0ms; transition: 0ms;">
                <h2><a href="http://www.3magine.com/wordpress-cms/">WordPress &amp; CMS</a></h2>
                <a href="http://www.3magine.com/wordpress-cms/"></a>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </li>
            <li class="air-small" style="-webkit-transition: 150ms; transition: 150ms;">
                <h2><a href="http://www.3magine.com/ui-ux-design/">UI &amp; UX Design</a></h2>
                <a href="http://www.3magine.com/ui-ux-design/"></a>
                <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
            </li>
            <li class="ipad-small" style="-webkit-transition: 300ms; transition: 300ms;">
                <h2><a href="http://www.3magine.com/web-applications/">Web Applications</a></h2>
                <a href="http://www.3magine.com/web-applications/"></a>
                <p>...when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </li>
            <li class="pro-small last" style="-webkit-transition: 450ms; transition: 450ms;">
                <h2><a href="http://www.3magine.com/social-networks/">Social Networks</a></h2>
                <a href="http://www.3magine.com/social-networks/"></span></a>
                <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            </li>
        </ul>

        <ul class="featured animationBegin">
            <li style="-webkit-transition: 800ms; transition: 800ms;"><img...

CSS

ul.services {
    float:left;
    width:100%;
    list-style:none;
    margin: 0 0 150px 0;
    padding:30px 0 0;
}
ul.services li {
    float:left;
    width:190px;
    margin-right:40px;
    text-align:center;
}
ul.services li .device {
    display:block;
    height:157px;
    margin:20px 0 10px;
}
ul.services li.last {
    margin-right:0;
}
ul.services li.imac-small .device {
    background:url(http://www.3magine.com/wp-content/themes/3magine/imac-small.png) no-repeat center center;
}
ul.services li.air-small .device {
    background:url(http://www.3magine.com/wp-content/themes/3magine/images/air-small.png) no-repeat center center;
}
ul.services li.ipad-small .device {
    background:url(http://www.3magine.com/wp-content/themes/3magine/images/ipad-small.png) no-repeat center center;
}
ul.services li.pro-small .device {
    background:url(http://www.3magine.com/wp-content/themes/3magine/images/pro-small.png) no-repeat center center;
}
ul.services li.imac-small .device img {
    margin:8px 0 0;
}
ul.services li.air-small .device img {
    margin:35px 0 0;
}
ul.services li.ipad-small .device img {
    margin:15px 0 0;
}
ul.services li.pro-small .device img {
    margin:32px 0 0;
}
.services h2 {
    font-size:18px;
    font-weight:normal;
    font-family:'ProximaNovaSemibold';
    color:#333;
    margin:0;
}
.services h2 a {
    color:#333;
}
.services p {
    margin:0;
}
.service > div {
    padding:58px 40px 0 240px;
    border-top:1px solid #d8d8d8;
    width:680px;
    margin-left:-40px;
    margin-top:72px;
}
.service > div.first {
    border-top:0;
    margin-top:90px;
}
.service > div:nth-child(2n) {
    padding:58px 240px 0 40px;
}
ul.featured {
    float:left;
    width:100%;
    list-style:none;
    margin:30px 0 0;
    padding:0;
}
ul.featured li {
    float:left;
    height:50px;
    line-height:50px;
    margin-right:75px;
}
ul.featured li.last {
    margin-right:0;
}
.services > * {
	position:relative;
	opacity:1;
	left:0px;
	-webkit-transition: all...

JavaScript

if (Modernizr.csstransitions) {
    function preloadImages(imgs, callback) {
        var cache = [],
            imgsTotal = imgs.length,
            imgsLoaded = 0;

        $(imgs).each(function (i, img) {
            var cacheImage = document.createElement('img');
            cacheImage.onload = function () {
                if (++imgsLoaded == imgsTotal) callback();
            };
            cacheImage.src = $(img).attr('src');
            cache.push(cacheImage);
        });
    }

    $.fn.trans = function () {
        console.log('trans');
        var t = arguments[0],
            d = arguments[1] || '';
        if (t) {
            $.each(this, function (i, e) {
                $(['-webkit-', '-moz-', '-o-', '-ms-', '']).each(function (i, p) {
                    $(e).css(p + 'transition' + d, t);
                });
            });
        }
    };

   
}