JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js">  
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js">  
  </script>
  <div id="container" />
</body>

CSS

@keyframes highlight-up {
  0% {
    background-color: green;
  }
  100% {
    color: default;
  }
}

@keyframes highlight-down {
  0% {
    background-color: red;
  }
  100% {
    color: default;
  }
}

.flashUp {
  animation: highlight-up 2s;
}
.flashDown {
  animation: highlight-down 2s;
}

Babel + JSX

class Stat extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      flash: false,
    }
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.count !== this.props.count) {
      const flash = nextProps.count > this.props.count
        ? 'Up'
        : 'Down'
      this.setState({ flash: false }, () => {
        this.setState({ flash })
      })
    }
  }
  render() {
    const { count } = this.props
    const { flash } = this.state
    const flashClass = flash ? `flash${flash}` : ''
    return (
      <div className={flashClass}>
        {count}
      </div>
    )
  }
}

class Container extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }
  componentWillMount() {
    setTimeout(() => {
      // animation is visible the first time
      this.setState({ count: 1 })
      
      setTimeout(() => {
        // animation is not visible subsequently
        this.setState({ count: 2 })
        setTimeout(() => {
        	this.setState({ count: 3 })
          
          setTimeout(() => {
            // first down animation is visible
            this.setState({ count: 2 })
            setTimeout(() => {
              // second down animation is not visible
          	  this.setState({ count: 1 })
              setTimeout(() => {
                // not sure why but this up animation is visible
                this.setState({ count: 2 })
              }, 2000)
            }, 2000)
          }, 2000)
        }, 2000)
      }, 3000)
    }, 100)
  }
  render() {
    const count = this.state.count
    return <Stat count={count} />
  }

}

ReactDOM.render(
  <Container />,
  document.getElementById('container')
);