JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="test" class="alert" data-bind="fade: topMessageShow, css: topMessageType, html: topMessage"></div>
<div id="fireCount">Fired: 0 times</div>

CSS

.alert {background-color: #ff0000}
.alert-info {background-color: #dff0d8;}

JavaScript

var fired = 0;

    ko.bindingHandlers.fade = {
      update: function resolveFade(element, valueAccessor, allBindingsAccessor) {
          $('#fireCount').text('Fired: ' + ++fired + ' times.');
        if (ko.utils.unwrapObservable( valueAccessor() )) {
          $(element).hide().delay(300).fadeIn('slow');
        } else {
          // fade out the notification and reset it
          $(element).fadeOut('slow', function() {
            // reset those 2 observables that set class and HTML of the notification DIV
            MyClass.topMessageType('');
            MyClass.topMessage('');
          });
        }
      }
    };

    var MyClass = {
        topMessageType : ko.observable(''),
        topMessage : ko.observable(''),
        topMessageShow : ko.observable(false)
    }
    
    ko.applyBindings(MyClass, document.getElementById('test'));
    
    MyClass.topMessageType('alert-info');
    MyClass.topMessage('test');
    MyClass.topMessageShow(true);