JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<div>
  <div>  
    <label data-bind="text: firstName"></label>
    <label data-bind="text: lastName"></label>
  </div>
  <div>
    First Name <input data-bind="value: firstName" />
  </div>
  <div>
    Last Name <input data-bind="value: lastName" />
  </div>
  <div>
    Full Name <label data-bind="text: fullName"></label>    
  </div>
</div>

JavaScript

$(function() { 
  function viewModel(){
    this.firstName = ko.observable('test');
    this.lastName = ko.observable('123');
    this.fullName = ko.computed(function() {
      return this.firstName() + ' ' + this.lastName();
    }, this);
  }

  ko.applyBindings(new viewModel());
})();