JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/data-driven-motion.min.js"></script>
<div id="app"></div>

CSS

body {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul {

}

li {
  padding: 0;
  font-size: .6em;
  font-weight: lighter;
  text-align: left;
}

p {
  text-align: center;
}

Babel + JSX

const { createElement: h, Component, render } = React
const { Motion } = DDM // https://github.com/tkh44/data-driven-motion

let items = []
for (let i = 100; i > 0; i--) {
  items[i] = { id: i, name: `Item ${i}`, username: `User ${i}` }
}
const WOBBLY_SPRING = { stiffness: 280, damping: 30 }

class App extends Component {
  state = {
    filter: 2
  }

  render () {
    return (
      <div>
        <input
          style={{
            width: '100%',
            maxWidth: 400,
            minWidth: 280,
            fontSize: '1em',
            margin: 8
          }}
          type={'range'}
          min={2}
          max={15}
          step={1}
          value={this.state.filter}
          onChange={({ target: { value } }) => this.setState({ filter: value })}
        />
        <p>Divisible by {this.state.filter}</p>
        <ListWrapper
          data={items.filter((d) => (d.id % this.state.filter) === 0)}
        />
      </div>
    )
  }
}

class ListWrapper extends Component {
  render () {
    return h(Motion, {
      data: this.props.data,
      component: h('ul', { style: { width: '100%' } }),
      getKey: data => data.id + data.name,
      onComponentMount: (data, i) => {
        // no springs
        return {
          opacity: 0,
          hue: i * 4 % 360,
          height: 0
        }
      },
      onRender: (data, i, spring) => {
        // springs
        return {
          opacity: spring(1),
          hue: spring(i * 4 % 360),
          height: spring(14, WOBBLY_SPRING)
        }
      },
      onRemount: ({ key, data, style }) => {
        return {
          opacity: 0,
          hue: 0,
          height: 0
        }
      },
      onUnmount: ({ key, data, style }, spring) => {
        return {
          opacity: spring(0),
          hue: spring(0),
          height: spring(0, WOBBLY_SPRING)
        }
      },
      render: (key, data, style) => {
        return h('li', {
          key, style: {
            opacity: style.opacity,
           ...