JSFiddle - React, Tailwind, and code Playground

by Arif

HTML

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.mobile.min.css">
<script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<div id="example">
    <div class="demo-section k-content" data-bind="visible: confirmed">
        Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
        <br /><br />
        <button data-bind="click: startOver" class="k-button k-primary">Start Over</button>
    </div>
    <div class="demo-section k-content wide">
        <div>
            <form>
                <ul id="fieldlist">
                    <li><label for="fname">First Name:</label> <input id="fname" data-value-update="keyup" data-bind="value: firstName" class="k-textbox" /></li>
                    <li><label for="lname">Last Name:</label> <input id="lname" data-value-update="keyup" data-bind="value: lastName" class="k-textbox" /></li>
                    <li><label for="gender">Gender:</label> <select id="gender" data-bind="source: genders, value: gender"></select></li>
                    <li> <label for="agree">License Agreement</label> <input type="checkbox" id="agree" data-bind="checked: agreed" /> I have read the licence agreement</li>
                </ul>
                <button data-bind="enabled: agreed, click: register" class="k-button k-primary">Register</button>
            </form>
        </div>
        <div>
            <h4>Current view model state:</h4>
            <pre>
    {
        firstName: <span data-bind="text: firstName"></span>,
        lastName: <span data-bind="text: lastName"></span>,
        gender: <span data-bind="text: gender"></span>,
        agreed:...

CSS

.demo-section > div {
            float: left;
            margin-bottom: 2em;
        }
        #fieldlist {
            margin: 0;
            padding: 0;
        }

        #fieldlist li {
            list-style: none;
            padding-bottom: 1.5em;
            text-align: left;
        }

        #fieldlist label {
            display: block;
            padding-bottom: .3em;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 12px;
        }
        .prettyprint {
            background-color: #fff;
            border: 1px solid #ccc;
            overflow: auto;
            padding: 5px;
        }

JavaScript

$(document).ready(function() {
            var viewModel = kendo.observable({
                firstName: "Arif",
                lastName: "Rahman",
                genders: ["Male", "Female"],
                gender: "Male",
                agreed: false,
                confirmed: false,
                register: function(e) {
                    e.preventDefault();

                    this.set("confirmed", true);
                },
                startOver: function() {
                    this.set("confirmed", false);
                    this.set("agreed", false);
                    this.set("gender", "Male");
                    this.set("firstName", "Arif");
                    this.set("lastName", "Rahman");
                }
            });

            kendo.bind($("#example"), viewModel);
        });