JSFiddle - React, Tailwind, and code Playground

by aravind_93

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
<div id="outer-wrapper">
			<div id="heading">
				Create Estimate
			</div>
			<div id="sub-cover">
				<div id="leftcover">
					<div id="project-name" class="spacing">
						<div id="p-heading">
							Name of the estimate/project
						</div>
						<div id="edit-project-name-on-click">
							<input id="project-name-input" data-bind="value: projectName, click: update" maxlength="70">
						</div>
						<div id="editable-project-name">
							<a id="p-link" href="#" data-bind="text: projectName"></a>
							<span id="editprojectnameicon" class="edit-icon" data-bind="click: editagain"><img src="images/Edit1.png"></span>
						</div>

					</div>
					
					
				</div>
				<span class="divider"></span>
				<div id="rightcover">
					<div id="verticla-name" class="spacing">
						<div id="v-heading">
							Vertical of the project
						</div>
						<div id="vertical-dropdown">
						<!--	<input id="vertical" value="1" style="width: 40%;" />-->
							<select id="verticals" data-bind="source: verticals, value: verticalselect"></select>
						</div>
						<div id="editable-vertical-name">
							<!--<a id="v-link" href="#"> Web and iOS Application</a>-->
							<a id="v-link" href="#" data-bind="text: verticalselect"></a>
							<span id="editverticalname" class="edit-icon" data-bind="click: editverticals"><img src="images/Edit1.png"></span>
						</div>
					</div>
					

				</div>	
			</div>
			<div...

CSS

body{margin: 0;}
header{display: block;margin: 0;padding: 0;width: 100%;height: 50px;background-color: #2C3742;};
#Qblogo{float: left;}
#Qblogo img{width: 100px;padding: 5px;vertical-align: middle;}
aside{width: 45px;background-color: grey;float: left;height: 1500px;}
#outer-wrapper{padding-left: 70px;}
#heading{font-size: 22px;font-family:Open Sans Light; padding-top: 1%;}
#sub-cover{border: 1px solid #dddddd;margin-top: 30px;float: left;width: 98%;box-shadow: #f2f2f2 2px;}
/*#project-name{padding: 30px 0 0 30px;}*/
.spacing{padding:30px 0 30px 30px; }
#editable-project-name{padding-top: 10px;display: none;}
#editable-vertical-name{padding-top: 10px;display: none;}
#edit-project-name-on-click{padding-top: 0px;}
#p-heading{padding-bottom: 10px;display: inline-block;}
#project-name{float: left;}
#v-heading{padding-bottom: 10px;display: inline-block;}
.addborder{border-bottom: 1px solid #dddddd;}
#leftcover{float: left;width: 50%;}
#rightcover{float: left;width: 40%;}
.divider{border-right: 1px solid #dddddd;height: 60px;float: left;display: block;margin: 28px 0px;}
#stocks_tbl{float: left;margin-top: 50px;width: 100%;}
#estimate-heading{font-weight: bold;padding: 30px 0 10px 0;float: left;}
#table-border{border-top: 1px solid #dddddd;float: left;width: 98%;}
span.k-icon.k-i-arrow-s {background-image: url('images/Drop.png');background-position: 0 0;background-size: 10px 10px;}
#stack-style{padding-top: 30px;padding-left: 30px;}
#save1{float: left;}

JavaScript

$(document).ready(function () {

    // Class for saving and restoring an Object
    function SaveObject(obj) {
        // Saved Object
        this.object = null;

        // Save Object
        this.set = function (obj) {
            this.object = obj;
        };

        // Retrieve saved Object
        this.get = function () {
            return this.object;
        };
        this.set(obj);
    };

    var entries = [
        { "id":"1", "Task":"", "Description":"","Estimate":"","Comments":"" },
        { "id":"2", "Task":"", "Description":"","Estimate":"","Comments":"" },
        { "id":"3", "Task":"", "Description":"","Estimate":"","Comments":"" }
    ];
    var savedArray = new SaveObject(entries);

    var stocksDataSource = new kendo.data.DataSource({
        transport:{
            read:function (options) {
                return options.success(entries);
            }
        },
        schema: {
                model: {

                    fields: {

                        id:{type:"number",editable:false},
                        Task: { validation: { required: false } },
                        Description: { validation: { required: false } },
                        Estimate: { type: "number", validation: { min: 0, required: false } },
                        Comments: { validation: { required: false } },
                        Estimatetype:{validation: { required: false } }
                    }
                }
            },
    });

                function estimateTypeEditor(container, options) {
                    $('<input data-value-field="Functional" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            dataTextField: "text",
                            dataValueField: "value",
                            value: "horizontal",
                            dataSource: [{ text: "Functional", value: "horizontal" },
                 ...