JSFiddle - React, Tailwind, and code Playground

by burkeholland

HTML

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.highcontrast.min.css">
<div class="wrapper k-content">
    <form>
        <dl>
            <dt>Email(m):</dt>
            <dd><input class="k-input" type="text" name="email" accesskey="m" /></dd>
            <dt>Name(n):</dt>
            <dd><input class="k-input" type="text" name="name" accesskey="n" /></dd>
            <dt>Birthdate(b):</dt>
            <dd><input data-role="datepicker" name="name" accesskey="b" /></dd>
            <dt></dt>
            <dd><textarea rows="10" cols="50" data-role="editor" name="name" /></dd>
        </dl>
    </form>
</div>

CSS

body, html {
    width: 100%;
    height: 100%;
}

.wrapper {
    width: 100%;
    height: 100%;
}    

FORM {
    margin: auto;
    padding-top: 20px;
    width: 400px;
}

input {
    font-size: 1.5em;
    width: 195px;
}

dt {
    padding-top: .5em;
    float: left;
    width: 100px;
}

dd {
    margin-bottom: .5em;
}

JavaScript

$(function() {

    kendo.bind(document.body);
    
});