JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
Name: <input type="text" data-bind="value: name, valueUpdate:'afterkeydown'">
<input type="checkbox" data-bind="checked: nvtoggle" />
<p>
   Hello, <span data-bind="text:  name, visible: nvtoggle"></span>
</p>
<span data-bind="text: fullName"></span>

<button data-bind="click: changedName">Change name</button>

JavaScript

var viewModel = function() {
    var self = this;
    self.name = ko.observable("Biala");
    self.changedName = function() {
        self.name("Hussain");
    };
    self.nvtoggle = ko.observable(true);
    
    self.fullName = ko.computed(function() {
        return self.name() + " is " + (self.nvtoggle() ? " " : " not ") + "visible";
    });
};    

$(function(){
    var vm = new viewModel();                                
    ko.applyBindings(vm);
});