JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300&subset=latin,cyrillic-ext,cyrillic'
          rel='stylesheet' type='text/css'>

</head>
<body>

<div class="container test-wrapper">
    <div class="row">
        <div class="col-md-4 left-sidebar">
            <div id="new">
                <fieldset class="form">
                    <div class="details">
                        <label>Имя: <input type="text" id="firstName"/></label>
                        <label>Фамилия: <input type="text" id="lastName"/></label>
                        <label>Описание: <textarea desk="Подсказка" id="description"></textarea></label>
                        <label>Дата начала: <input type="text" id="dateOfStart"/></label>
                        <label>Дата окончания: <input type="text" id="dateOfEnd"/></label>
                    </div>
                    <div class="tools">
                        <button data-bind="click: addPerson">Добавить</button>
                    </div>
                    <input type="reset" value="Сбросить данные"/>
                </fieldset>
                <script type="text/html" id="personTemplate">
                    <section class="person">
                        <h3>${ firstName } ${ lastName }</h3>
                        <p>${ description }</p>
                        <p>${dateOfStart} - ${dateOfEnd}</p>
                        <div class="tools">
                            <button data-bind="click: deleteMe">Удалить</button>
                       ...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    font-family: 'Roboto Condensed', sans-serif;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.nopadding {
    padding: 0;
}

.test-wrapper {
    padding-top: 20px;
}

.main, .left-sidebar, .sort {
    background: whitesmoke;
    padding: 20px;
}
.sort{
    margin-bottom: 5px;
}
.form input, .form textarea, .form button, .form label{
    display: block;
    width: 100%;
}
.sort input{
    display: block;
    width: 80%;
    margin: 0 auto;
}
.form input, .form textarea {
    border: none;
    background: white;
    padding: 5px;
    width: 100%;
    margin: 10px 0;
}

.form button, .form input[type=reset] , .tools button {
    border: none;
    background: #0398c5;
    color: white;
    padding: 10px;
    margin-bottom: 5px;
    border-bottom: 3px solid #0583a9;
}

.desk {
    position: absolute;
    z-index: 9;
    background: white;
    padding: 5px;
    bottom: -20px;
    right: 20px;
    -webkit-box-shadow: 0px 0px 16px -10px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 16px -10px...

JavaScript

(function ($) {
    var testProject = {
        wrapper: {$test: null}, data: null,

        init: function () {
            var me = this;
            me.cache();
            me.load();
            me.initJson();
            me.sort_data();
            $("#dateOfStart").datepicker();
            $("#dateOfEnd").datepicker();

            var desk = $('#description').attr('desk');
            $('#description').mouseenter(function () {
                $(this).parent().append('<p class="desk">' + desk + '</p>')
                $(this).parent().css('position', 'relative');
            });

            $('#description').mouseleave(function () {
                $('.desk').remove();
            });

        },
        cache: function () {
            this.wrapper.test = $('.test-wrapper');
        },

        load: function (index, value) {
            data = [];
            var dataTemplate = {
                people: ko.observableArray(data),
                addPerson: function () {
                    dataTemplate.people.push({
                        firstName: $("#firstName").val(),
                        lastName: $("#lastName").val(),
                        description: $("#description").val(),
                        dateOfStart: $("#dateOfStart").val(),
                        dateOfEnd: $("#dateOfEnd").val(),
                        deleteMe: function () {
                            dataTemplate.people.remove(this);
                        }
                    });
                    testProject.resetForm();
                    testProject.personEvent();
                    testProject.customEvents();
                }
            };
            ko.applyBindings(dataTemplate);
        },

        personEvent: function () {
            $personDiv = $('.main').find('.person');

            $personDiv.click(function () {
                var i = $(this).index();
                $('.form').find('#firstName').val(data[i].firstName);
               ...