JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
<script src="http://fb.me/react-with-addons-0.11.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero officiis suscipit earum id quisquam omnis sunt officia aperiam voluptatem non rem eum soluta voluptatum ipsa distinctio? Aliquid laboriosam quo exercitationem.

CSS

.composer {
  padding: 1.5em;
  background-color: #eee;
}

.composer h2 {
  margin-top: 0;
}

.composer label {
  display: block;
  margin-bottom: 0.5em;
}

.composer input,
.composer textarea {
  padding: 0.5em;
  margin-bottom: 1em;
  border: 1px solid #999;
  border-radius: 0.25em;
}

.composer textarea {
  width: 100%;
  min-height: 6em;
}

.full-message-view {
  padding: 0.5em;
}

.msg-list {
  list-style:none;
  margin:0;
  margin-bottom: 1em;
  padding: 0
}

.msg-list li {
  border-bottom: 1px solid #999;
  margin: 0;
  padding: 1.5em;
}

.msg-list .unread {
    font-weight: bold;
}
.msg-list .selected {
  background-color: #eee;
}

.msg-list li > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}
.msg-list li h3 {
  width: 4em;
}

.msg-list li p {
  width: 75%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.msg-list .selected h3 {
  vertical-align: top;
}

.msg-list .selected p {
  text-overflow: initial;
  overflow: auto;
  white-space: normal;
}

.msg-list button {
  float: right;
}

JavaScript 1.7

/** @jsx React.DOM */

var cx = React.addons.classSet;

var messages = [
  { text : "Sed id libero ut nunc lobortis laoreet. Fusce vel pharetra eros, in sollicitudin mi. Morbi iaculis, lorem et mollis volutpat, sapien nunc lobortis metus, ut iaculis magna arcu et augue. In quam massa, maximus sed tortor et, elementum volutpat urna. Proin porttitor, sem at feugiat hendrerit, quam leo lobortis ex, et lacinia lectus arcu eu justo. Donec rhoncus mauris id nibh ornare, quis bibendum neque molestie. Phasellus condimentum urna non nulla pellentesque, rutrum mattis erat suscipit. Duis ornare dictum sodales. Pellentesque volutpat vehicula mi, vestibulum finibus metus blandit vehicula. Nunc sollicitudin maximus erat, id bibendum sapien mattis at.", sender : "Nick", read : false, id: 1, },
  { text : "Donec mauris tellus, pretium sed neque nec, malesuada tempus dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pretium hendrerit velit, in blandit lectus volutpat nec. Sed sem arcu, scelerisque sit amet imperdiet quis, venenatis et felis. Phasellus pharetra nisl felis, non aliquet sapien ultricies quis. Vestibulum viverra pharetra lacinia. Sed hendrerit varius augue ut tempor.", sender : "Mika", read : false, id: 2 },
  { text : "Integer porttitor pharetra libero in volutpat. Praesent eget congue dolor. Duis a porta mauris. Etiam eu nunc tristique, malesuada magna non, mollis enim. Cras molestie leo a tellus placerat venenatis. Duis sed pellentesque nulla. Donec eu finibus neque. Sed non tellus nisi. Nullam eget augue id neque facilisis fringilla eget nec libero. Praesent tincidunt ante pharetra, elementum eros in, congue massa. Nam feugiat, felis eu varius vulputate, libero ante dictum ex, a vehicula leo ante eget ante. Aenean augue nunc, gravida sit amet odio in, pulvinar vehicula neque. Fusce vel mauris id mauris maximus convallis eget in arcu. Maecenas vel tempus sapien.", sender : "Viljami", read : false, id: 3 },
  { text :...