JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div id="container">
    <h1>Adam Schwartz <span>Composer</span></h1>
</div>

CSS

@-webkit-keyframes flyin {
    from {
        opacity: 0;
        -webkit-transform: scale(0.5);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

html {
    height: 100%;
    width: 100%;
}

body {
    background: -webkit-linear-gradient(top, #f6f6f6, #ccc);
    font: 20px normal Helvetica, sans-serif;
}
    
    #container {
        overflow: hidden;
        position: absolute;
        width: 804px;
        background: rgba(0, 0, 0, 0.03);
        margin-left: -462px;
        left: 50%;
        padding: 60px;
        box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.1);
    }
        
        h1 {
            margin: 0px;
            font: 50px normal Helvetica, sans-serif;
            color: #444;
            line-height: 10px;
            padding: 0px 0px 5px 14px;
            text-shadow: 0px 1px rgba(255, 255, 255, 0.9);
        }
        
            h1 span {
                font-size: 29px;
                color: #999;
                padding-left: 6px;
            }

        h4 {
            color: #666;
            font-size: 25px;
            text-shadow: 0px 1px #EEE;
            padding: 0px 12px 4px;
        }

        .item {
            position: relative;
            background: #fff;
            border: 1px solid #ccc;
            box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
            width: 380px;
            height: 220px;
        }

        .marquee .item {
            width: 802px;
            height: 340px;
        }

        .marquee h4 {
            display: none;
        }

        .flyin {
            float: left;
            margin: 40px 0px 0px 0px;
            -webkit-animation-name: flyin;
            -webkit-animation-duration: 0.8s;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-direction: alternate;
        }

            .flyin.marquee {
                margin-top: 43px;
                width: 802px;
                height: 340px;
            }

           ...

JavaScript

var i = -1,
    container = $('#container'),
    data = [{
        marquee: true,
        title: 'Linkable Networks',
        img: 'https://s3.amazonaws.com/uploads.hipchat.com/10819/42395/17pyuffcb01xake/linkables.png',
        date: 'Nov &#8216;11',
        embed: true,
        vimeo: 33672335
    },{
        title: 'MASSQ',
        img: 'https://s3.amazonaws.com/uploads.hipchat.com/10819/42395/g0us21ithf8l3q3/massq.png',
        date: 'Ongoing...',
        embed: true,
        youtube: 'SY-Yezc4sFM'
    },{
        title: 'Matureness',
        date: 'Sept &#8216;11',
        img: 'https://s3.amazonaws.com/uploads.hipchat.com/10819/42395/eisf25cfgiiyhay/matureness.png'
    },{
        title: 'Killer',
        date: 'Aug &#8216;11',
        img: 'https://s3.amazonaws.com/uploads.hipchat.com/10819/42395/zdvud7psf5pio5y/killer.png',
        embed: true,
        vimeo: 26557479
    },{
        title: 'Rook',
        date: 'May &#8216;11',
        img: 'https://s3.amazonaws.com/uploads.hipchat.com/10819/42395/7tj8ons1h24fkvh/rook.png',
        embed: true,
        vimeo: 23501504
    }]
;

list = function (v, i) {
    var h = v.marquee ? 320 : 200,
        w = v.marquee ? 782 : 360
    ;
    return '' +
        '<div class="video-inner">' + 
        '<img style="height:' + h + 'px;width:' + w + 'px" src="' + v.img + '" />' +
        '</div>' + (
            v.embed ?
            '<div class="click"><h3>&#8227;</h3></div>'
            : ''
        )/* +
        '<div class="info">' +
            '<h2>' +
                v.title +
                '<span class="date">' + v.date + '</span>' +
            '</h2>' +
        '</div>'*/
    ;
};

embed = function (v) {
    var h = v.marquee ? 320 : 200,
        w = v.marquee ? 782 : 360
    ;
    if (v.vimeo) {
        return vimeo(v, h, w);
    } else if (v.youtube) {
        return youtube(v, h, w);
    }
};

vimeo = function (v, h, w) {
    return '<embed src="http://vimeo.com/moogaloop.swf?clip_id=' + v.vimeo +...