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">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<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>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<div id="tabstrip">	
					<ul>
                        <li class="k-state-active letter-style">
                        Sub-estimate 1 <img src="images/Edit2.png">
                        </li>
                    </ul>
                	<span id="appendbutton">
						<!--<input type="text" value="Item" id="appendText" class="k-textbox"/>--> <button class="appendItem k-button">+</button>
					</span>    
					
					

                    <div>
						<div class="stack-style letter-style">
							Stack:<div class="selected-stack"></div>
							<select class="stack" multiple="multiple" data-placeholder="Select stack" style="width: 65%;" />
								<option>Android</option>
					            <option>JavaScript</option>
					            <option>iOS</option>
					            <option>Java</option>
					            <option>Hadoop</option>
					            <option>R</option>
					            <option>Power BI</option>
					            <option>Spark</option>
					            <option>Tableau</option>
					            <option>J2EE</option>
					            <option>ATG</option>
					            <option>Kendo UI</option>
							</select><div class="selectedstacks"></div> <img class="editstack" src="images/Edit1.png"><img class="done" src="images/tick.png">
						</div>
						<div class="stocks_tbl" tabindex="0">

						</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: 24px;font-family:Open Sans Condensed; 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;font-size: 12px;}
#project-name{float: left;}
#v-heading{padding-bottom: 10px;display: inline-block;font-size: 12px;}
.link-style{font-family:Open Sans;font-size: 12px;text-decoration: none;color: #1f73af;}
.letter-style{font-family:Open Sans;}
.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 0px 0;float: left;font-size: 15px;width: 98%;height: 30px;}
#share-icon{float: right;}
#table-border{float: left;width: 98%;margin-top: 20px;}
/*span.k-icon.k-i-arrow-s {background-image: url('images/Drop.png');background-position: 0 0;background-size: 10px 10px;}*/
#tabstrip ul{display: inline-block;}
#appendbutton{display: inline-block;}
.k-button{background: #1f73af;color: white;margin-top: 10px;}
.k-image{position: absolute;right: 4px;top: 13px;}
.k-link{margin-right: 10px;}
.stack-style{margin: 15px 0 15px 0;}
.stack_style{margin: 15px 0 15px 0;}
.done{height: 20px;}
.editstack{padding-left: 1%; height: 17px;display:...

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);
    };

    if (localStorage["estimate_details"]) {
        localStorage.removeItem("estimate_details");
    };

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



    function initialiseTable(n){


            var entries = [
        { "id":"1", "Task":"", "Subtask":"","Estimate":"","Comments":"" },
        { "id":"2", "Task":"", "Subtask":"","Estimate":"","Comments":"" },
        { "id":"3", "Task":"", "Subtask":"","Estimate":"","Comments":"" }
    ];
    var savedArray = new SaveObject(entries);
    // localStorage["estimate_details"] = JSON.stringify(entries);

    var stocksDataSource = new kendo.data.DataSource({
        transport:{
            read:function (options) {

                return options.success(entries);
            }
        },
        schema: {
                model: {
                    id: "ID",
                    fields: {
                        
                        id:{type:"number",editable:false},
                        Task: { validation: { required: false } },
                        Subtask: { validation: { required: false } },
                        Estimate: { type:...