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

p, h4 {
  margin: 0;
  padding: 0.25em 0;
}

#root > div {
  width: 100px;
  margin: 0 auto;
  background-color: #fff;
  outline: 1px solid #ccc;
  padding: 0 10px;
}

.up {
  animation: up 1s;
}
@keyframes up {
  from { background-color: #f30 }
  to { background-color: #fff }
}

.down {
  animation: down 1s;
}
@keyframes down {
  from { background-color: #0a0 }
  to { background-color: #fff }
}

Babel + JSX

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

class Quote extends React.Component {
  state = {
    name: '',
    price: 0,
    trend: 'flat',
  }
  update = () => {
    getFauxData('金').then((data) => {
      let trend = 'flat'
      if (data.price > this.state.price) {
        trend = 'up'
      } else if (data.price < this.state.price) {
        trend = 'down'
      }
      this.setState({
        ...data,
        trend,
      })
    })
  }
  componentWillMount() {
    this.update()
    setInterval(this.update, 3000)
  }
  render() {
    return (
      <div className={this.state.trend} key={this.state.price}>
        <h4>{this.state.name}</h4>
        <p>{this.state.price}</p>
      </div>
    )
  }
}

ReactDOM.render(<Quote />, root)