JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="http://fooo.fr/~vjeux/irc-logger/jquery-1.10.2.min.js"></script>
<script src="http://fooo.fr/~vjeux/irc-logger/moment.min.js"></script>
<script src="http://fooo.fr/~vjeux/irc-logger/utf8_encode.js"></script>
<script src="http://fooo.fr/~vjeux/irc-logger/md5.js"></script>
<script src="http://fooo.fr/~vjeux/irc-logger/URI.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var Timestamp = React.createClass({
  render: function() {
    return <span>[{moment.unix(this.props.children).format("HH:mm")}]</span>;
  }
});

var Source = React.createClass({
  render: function() {
    var entry = this.props.children;
    return <span>{entry}</span>;
  }
});

var Author = React.createClass({
  render: function() {
    var name = this.props.children;
    var color;
    try {
      color = parseInt(md5(name).substr(2, 4), 16);
    } catch(e) {
      color = 0;
    }
    var color = 'hsl(' + color + ', 68%, 35%)';
    return <span style={{color: color}}>{name}</span>;
  }
});

var GitHubCode = React.createClass({
  render: function() {
    var entry = this.props.children;
    var split = entry.split(' ');
    var repo = split[0];
    var file = split[1];
    var href = 'https://www.github.com/' + repo + '/blob/master/' + file;
    return <a href={href}>{entry}</a>;
  }
});

var Content = React.createClass({
  render: function() {
    return <span>{this.linkify(this.props.children)}</span>
  },
  
  linkify: function(text) {
    var split = text.split(URI.find_uri_expression);
    var result = [];
    for (var i = 0; i < split.length; ++i) {
      if (split[i] !== undefined) {
        if (i + 1 < split.length && split[i + 1] === undefined) {
          result.push(<a href={split[i]} target="_blank">{split[i]}</a>);
        } else {
          result.push(split[i]);
        }
      }
    }
    return result;
  }
});

var Entry = React.createClass({
  shouldComponentUpdate: function() {
    return false;
  },

  renderers: {
    'github-code': GitHubCode,
    'default': Content
  },

  render: function() {
    var entry = this.props.entry;
    var Content = this.renderers[entry.source] || this.renderers.default;
    return (
      <div>
        <Timestamp>{entry.ts}</Timestamp>{' '}
        <Source>{entry.source}</Source>{' '}
        <Author>{entry.who}</Author>{': '}
        <Content>{entry.msg}</Content>
      </div>
    );
...