JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://jp.igniteui.com/js/external/knockout-latest.js"></script>
<script src="https://jp.igniteui.com/js/external/knockout.mapping-latest.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.editors.knockout-extensions.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div class="order-container">
        <div class="row heading-row">
            <label class="heading-label">Ignite UI for jQuery エディター</label>
            <label class="heading-label">プレーン INPUT 要素</label>
        </div>
        <div class="editor-row">
            <div class="row">
                <label class="row-label">注文日:</label>
            </div>
            <div class="row">
                
                <div id="orderDateIG" class="row-control" data-bind="igDateEditor: { value: orderDate, textAlign: 'right' }"></div>
                <input id="orderDate" type="text" class="row-control" data-bind="value: orderDate"></input>
            </div>
        </div>

        <div class="editor-row">
            <div class="row">
                <label class="row-label">注文時間:</label>
            </div>
            <div class="row">
                
                <div id="orderTimeIG" class="row-control" data-bind="igTimePicker:...

CSS

body { font-family: Arial; }
        label { display: inline-block; }

        .order-container {
            position: relative;
            width: 450px;
            margin-left: -225px;
            left: 50%;
            font-size:1.2em;
        }
        .row {
            margin-top: 5px;
        }
        .row-control {
            height: 28px;
            padding: 0;
            vertical-align: top;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        .heading-row
        {
            margin: 20px 0px 10px 0px;
            font-size: large;
        }
        
        .heading-label, .row-label, .row-control
        {
            width: 200px;
            margin: 0px 5px 0px 5px;
        }



        @media all and (max-width: 520px) {
            .ui-datepicker {
                width: 250px;
            }

            .order-container {
                width: 280px;
                margin-left: -140px;
            }

            .ui-igedit {
                margin-bottom: 5px;
            }
        }

JavaScript

$(function () {
var orderDate = new Date(2012, 9, 24, 10, 12);
        var shipDate = new Date(2012, 10, 12, 22, 45);
        var viewModel = {
            orderDate: ko.observable(orderDate),
            shipDate: ko.observable(shipDate),
            dueInDays: ko.observable(7),
            customerName: ko.observable("Peter Sanders"),
            contactPhone: ko.observable("318-555-6879"),
            advancePayment: ko.observable(516.89),
            discountPercent: ko.observable(8)
        };

        $(function () {
            ko.applyBindings(viewModel);
        });
});