JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button class="btn btn-default" data-bind="click: save, disable:state">Save</button>
<br>
<div class="alert alert-success" data-bind="slideVisible: state, text: message"></div>

JavaScript

function MyViewModel() {
   var self = this;

   self.state = ko.observable(false);
   self.message = ko.observable('');
   self.save = function() {
      self.state(true);
      self.message("Result of saving " + new Date());

   };
	//
   ko.bindingHandlers.slideVisible = {
      init: function(element, valueAccessor) {
         var value = ko.unwrap(valueAccessor());
         $(element).toggle(value);
      },
      update: function(element, valueAccessor, allBindings) {
         var value = ko.unwrap(valueAccessor()),
            duration = allBindings.get("slideDuration") || 400,
            delay = allBindings.get("slideDelay") || 2000;
         if (value) {
            $(element).slideDown(duration);
            setTimeout(function() {
               $(element).slideUp(duration, function() {
                  self.state(false);
                  self.message('');
               });
            }, delay);
         }
      }
   };
}
//
ko.applyBindings(new MyViewModel());