JSFiddle - React, Tailwind, and code Playground

by smichelotti

HTML

<div id="tagsList">
    <div>
         <h2>Tags</h2>
    </div>
    <div>
        <input type="text" placeholder="Add New Tag" />
        <button>+ Add</button>
        <ul data-bind="template: {name: 'tagsTempl', foreach: tags}"></ul>
    </div>
</div>
<script id="tagsTempl" type="text/html">
    <li>
        <span data-bind="text: Name + ' ' + (new Date()).toLocaleTimeString()"></span>
        <div>
            <a href="#">Edit</a>
            <a href="#">Delete</a>
        </div>
    </li>
</script>

JavaScript

var data = [{
        Id: 1,
        Name: "Ball Handling"
    }, {
        Id: 2,
        Name: "Passing"
    }, {
        Id: 3,
        Name: "Shooting"
    }, {
        Id: 4,
        Name: "Rebounding"
    }, {
        Id: 5,
        Name: "Transition"
    }, {
        Id: 6,
        Name: "Defense"
    }, {
        Id: 7,
        Name: "Team Offense"
    }, {
        Id: 8,
        Name: "Team Defense"
    }];

    var viewModel = {
        //data
        tags: ko.observableArray(data),
        tagToAdd: ko.observable(""),

        //behaviours
        addTag: function () {
            this.tags.push({
                Name: this.tagToAdd()
            });
            this.addTag("");
        }
    };

    ko.applyBindings(viewModel);