JSFiddle - React, Tailwind, and code Playground

HTML

<!-- ko with: title -->
<h2 data-bind="text: $data"></h2>
<!-- /ko -->
<!-- ko with: summary -->
<h2 data-bind="text: $data"></h2>
<!-- /ko -->

<button type="button" data-bind="click: change">
  Change
</button>

CSS

h2,
p {
  animation: bg 1s backwards;
}

@keyframes bg {
  0% {
    background: #00ff40;
  }
  100% {
    background: initial;
  }
}

JavaScript

function viewModel() {
  var self = this;

  this.title = ko.observable('0');
  this.summary = ko.observable('0');

  this.change = function() {
    self.title(Math.random().toString());

    if (self.title() < 0.5) {
      self.summary(Math.random().toString());
    } else {
      self.summary(self.summary());
    }
  }
};

var vm = new viewModel();

ko.applyBindings(vm);