JSFiddle - React, Tailwind, and code Playground

by Zhou Qi

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>
<div id="root">
</div>

CSS

ul, li {
  margin: 0;
  padding: 0;
  height: 30px;
  line-height: 30px;
}
ul {
  width: 150px;
  background-color: #fff;
  outline: 1px solid #ccc;
  margin: 0 auto;
  overflow: hidden;
}
li {
  list-style: none;
  position: relative;
  animation: move 0.5s forwards;
}
@keyframes move {
  from { top: 0 }
  to { top: -30px }
}

span {
  padding: 0 1em;
}
span:last-child {
  float: right;
}

Babel + JSX

function getFauxData(name) {
  return Promise.resolve({
    name,
    price: 0.99 + Math.floor(Math.random() * 5),
  })
}

class Quotes extends React.Component {
  list = ['金', '银', '铂', '钯']
  state = {
    index: 0,
    prev: {},
    current: {},
  }
  update = () => {
    getFauxData(this.list[this.state.index]).then((data) => {
      this.setState({
        current: data,
        prev: this.state.current,
        index: (this.state.index + 1) % this.list.length,
      })
    })
  }
  componentWillMount() {
    this.update()
    setInterval(this.update, 3000)
  }
  render() {
    return (
      <ul>
        <li key={'prev' + this.state.prev.name}>
          <span>{this.state.prev.name}</span>
          <span>{this.state.prev.price}</span>
        </li>
        <li key={'current' + this.state.current.name}>
          <span>{this.state.current.name}</span>
          <span>{this.state.current.price}</span>
        </li>
      </ul>
    )
  }
}

ReactDOM.render(<Quotes />, root)