JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.1.26/mithril.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<main>
    <div id="app" role="main">
      <div id="videoPlayer"></div>
      <div id="videoList"></div>
    </div>
  </main>

  <div class="container">
    <div class="link">
      <a href="..">..</a>
    </div>
  </div>

  <script>window.Promise || document.write('<script src="http://es6-promises.s3.amazonaws.com/es6-promise-2.0.1.min.js"><\/script>')</script>
  <script>var Promise = Promise || ES6Promise.Promise;</script>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,500,700,500italic,900,700italic,900italic);

    * { font-family: 'lato', sans-serif; line-height:1.2; vertical-align:middle; }

    body { background: #d5d5d5;  }

    main {
      border-radius: 0.25rem;
      display: block;
      margin: 3vh auto;
      overflow: hidden;
      padding: 1.5rem 0 0;
      position: relative;
    }

    .card {
      background    : white;
      border-radius : 3px;
      box-shadow    : 0 1px 2px #aaa;
      display       : block;
      margin        : 0 1rem 1rem;
      max-width     : 448px;
      padding       : 1.5rem;
      position      : relative;
      z-index       : 2;
    }

    .card.new-card {
      animation         : fly-in .3s .5s ease both;
      -webkit-animation : fly-in .3s .5s ease both;
      -moz-animation    : fly-in .3s .5s ease both;
    }

    .card h1 {
      font-size: 2rem;
      margin-bottom: 1em;
    }

    @-webkit-keyframes fly-in {
      from {
        -webkit-transform:translateY(15rem) rotate(15deg);
        opacity:0;
      }
    }
    @-moz-keyframes fly-in {
      from {
        -moz-transform:translateY(15rem) rotate(15deg);
        opacity:0;
      }
    }
    @keyframes fly-in {
      from {
        transform:translateY(15rem) rotate(15deg);
        opacity:0;
      }
    }

    h2 {
      color: gray;
      font-size: 0.9rem;
      font-weight: 400;
      line-height: 2.5;
    }

    main .row {
      margin-left: 0;
      margin-right: 0;
    }

    @media only screen
    and (min-device-width : 448px) {
      .card {
        display: inline-block;
        width: 448px;
      }
    }

    .videoList {
      -webkit-overflow-scrolling: touch;
    }

    #app {
      text-align: center;
    }

JavaScript

/* global m */
/* global Velocity, FastClick, moment */
/* jshint devel:true, strict:false */

// todo: move import structural css from stylesheet

(function(window, document) {
  var app = {};

  // App dependancies
  app.velocity  = Velocity;
  app.fastclick = FastClick;
  app.moment    = moment;

  // Stip utility
  app.strip = function(html) {
    // http://stackoverflow.com/a/822486
    var tmp = document.createElement('div');
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || '';
  };

  // Sub utility
  app.sub = function(str, obj) {
    var keys = Object.keys(obj);

    keys.map(function(key) {
      var re = new RegExp('{' + key + '}', 'gm');
      str = str.replace(re, obj[key]);
    });

    return str;
  };

  // Array Flatten utility
  app.array_flatten = function(arrays) {
    return [].concat.apply([], arrays);
  };

  // GUID utility
  app.guid = (function() {
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
                 .toString(16)
                 .substring(1);
    }
    return function() {
      return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
             s4() + '-' + s4() + s4() + s4();
    };
  })();

  app.unloadable = function(element, isInit, context) {
    context.onunload = function() {
      element.pause();
      element.src = '';
      element.innerHTML = '';
      element.remove();
    };
  };

  // Model
  app.Video = function(data) {
    this.content    = m.prop(data.content);
    this.date       = m.prop(data.date);
    this.duration   = m.prop(data.duration);
    this.flash      = m.prop(data.flash);
    this.href       = m.prop('');
    this.id         = m.prop(app.guid());
    this.mp4        = m.prop(data.mp4);
    this.ogg        = m.prop(data.ogg);
    this.poster     = m.prop(data.poster);
    this.thumbnail  = m.prop(data.src);
    this.title      = m.prop(data.title);
    this.webm       = m.prop(data.webm);

    this.moment     =...