JSFiddle - React, Tailwind, and code Playground

by kmalakoff

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="https://raw.github.com/jquery/globalize/master/lib/globalize.js"></script>
<script src="https://github.com/jquery/globalize/raw/master/lib/cultures/globalize.culture.fr-FR.js"></script>
<script src="https://raw.github.com/kmalakoff/knockback/0.16.4/knockback-full-stack.min.js"></script>
<h1>Knockback.js Interactive Tests</h1>
<div class="header">
  <button data-bind="text: label_button_new, click: onAdd"></button>
  <select data-bind="options: available_languages, value: selected_language"></select>
  <div class="contact new">
    <h3 data-bind="text: label_title_new"></h3>
    <div><label data-bind="text: label_name"></label><input data-bind="value: new_name" /></div>
    <div><label data-bind="text: label_email"></label><input data-bind="value: new_email" /></div>
    <div><label data-bind="text: label_date"></label><input data-bind="value: new_date" /></div>
  </div>
</div>
<div class="body">
  <div data-bind='template: {name: "contact_template", foreach: contacts}'> </div>
</div>

<script type="text/html" id="contact_template">
  <div class="contact">
    <h3><span data-bind="text: name" /> (<span data-bind="text: email" />)</h3>
    <div><label data-bind="text: label_name"></label><input data-bind="value: name" /></div>
    <div><label data-bind="text: label_email"></label><input data-bind="value: email" /></div>
    <div><label data-bind="text: label_date"></label><input data-bind="value: date" /></div>
  </div>
</script>

CSS

h1, div.header {
  width: 100%; margin: 0;
  border-style:solid; border-width:1px; background: #ADADEB;
}
h2 {
  font-size:20px;
}
div.header {
   width: 100%; float: left; display: block; background: #ADADEB;
} 
div.contact {
  position: relative;
  width: 250px; height: 100%; float: left; display: block; margin: 5px; padding: 0px 10px 10px 10px;
  border-style:solid; border-width:1px; background: #E9D4FF;
}
div.contact label {width: 35%; text-align:right; font-size:12px;}
div.contact input {width: 60%; float: right;}
div.contact button {position: absolute; right:10px; top:15px;}

JavaScript

///////////////////////////////////SAMPLE CODE from examples_lib in https://github.com/kmalakoff/knockback////////////

var LocaleManager = (function() {
  function LocaleManager(locale_identifier, id_to_string_map_by_culture) {
    this.id_to_string_map_by_culture = id_to_string_map_by_culture;
    this.setLocale(locale_identifier);
  }
    
  LocaleManager.prototype.get = function(string_id) {
    var culture_map;
    culture_map = this.id_to_string_map_by_culture[this.locale_identifier];
    if (!culture_map) return '';
    return culture_map.hasOwnProperty(string_id) ? culture_map[string_id] : '';
  };
  
  LocaleManager.prototype.getLocale = function() { return this.locale_identifier; };
  LocaleManager.prototype.setLocale = function(locale_identifier) {
    var culture_map, key, value, _results;
    this.locale_identifier = locale_identifier;
    Globalize.culture = Globalize.findClosestCulture(locale_identifier);
    this.trigger('change', this);
    culture_map = this.id_to_string_map_by_culture[this.locale_identifier];
    if (!culture_map) return;
    
    _results = [];
    for (key in culture_map) {
      value = culture_map[key];
      _results.push(this.trigger("change:" + key, value));
    }
    return _results;
  };
  return LocaleManager;
})();
_.extend(LocaleManager.prototype, Backbone.Events);

var LongDateLocalizer = kb.LocalizedObservable.extend({
  constructor: function(value, options, view_model) {
    LongDateLocalizer.__super__.constructor.apply(this, arguments);
    return kb.utils.wrappedObservable(this);
  },
  read: function(value) { 
    return Globalize.format(value, 'dd MMMM yyyy', kb.locale_manager.getLocale()); 
  },
  write: function(localized_string, value) {
    var new_value = Globalize.parseDate(localized_string, 'dd MMMM yyyy', kb.locale_manager.getLocale());
    return !(new_value && _.isDate(new_value)) ? kb.utils.wrappedObservable(this).resetToCurrent() : value.setTime(new_value.valueOf());
  }
});

var Contact =...