JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<div data-bind="if: hasAddress()">
		You live at:
		<p data-bind="text: address().street.toUpperCase()"></p>			
	</div>
	
	<div data-bind="if: !hasAddress()">
		Sorry! I don't know where you live
	</div>

</div>

<button data-bind="click: setAddress">Set Address</button>
<button data-bind="click: removeAddress">Clear Address</button>

CSS

div {
  border: 1px solid gray;
  padding: .5em;
  margin: .5em;
}

div > div
{
  border: 1px solid lightgray;
}
button {
  display: inline-block;
  margin-left: 1em;
}

JavaScript

var ViewModel = (function () 
{ 
  function ViewModel() 
  { 
  	var _this = this; 
    
    this.address = ko.observable();
    this.hasAddress = ko.computed(function () { return _this.address() != null; }); 
  } 
  
  ViewModel.prototype.setAddress = function () 
  { 
  	this.address({street: '123 My Street'});     
  }
  
  ViewModel.prototype.removeAddress = function () 
  { 
  	this.address(null);
  }  

	return ViewModel; 
})(); 

// enable deferUpdates globally
ko.options.deferUpdates = true;
ko.onError = function(error) {
    alert("knockout error\n" + error);
};

// bind viewmodel
var vm = new ViewModel(); 
ko.applyBindings(vm);