JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.8/rx.all.min.js"></script>
<div>
   <div id="the-element">
   
   </div>
</div>

CSS

#the-element {
  width: 500px;
  height: 200px;
  margin: auto;
  background-color: #eeeeee;
}

#the-element.flag {
  background-color: #ff0000;
}

JavaScript

(function(Rx){
  // (note): uses HTML5 classList. Be aware of browser limitations

  var el = document.getElementById('the-element');

  Rx.Observable.merge(
      Rx.Observable.fromEvent(el, 'mouseenter').map(function(e) {
          return { target: e.target, isAdd: true, className: 'flag' }
      }),
      Rx.Observable.fromEvent(el, 'mouseleave').map(function(e) {
          return { target: e.target, isAdd: false, className: 'flag' }
      }))
      .subscribe(function(obj){
          if(obj.isAdd) {
              obj.target.classList.add(obj.className);
          } else {
              obj.target.classList.remove(obj.className);
          }
      });

}(Rx));