JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" cellpadding="0" cellspacing="0">
    <thead>
        <th>Name</th>
        <th>Age</th>
        <th>Description</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <textarea></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <textarea></textarea>
            </td>
        </tr>
    </tbody>
</table>

CSS

table tr td {padding:0px 0px 0px 0px;}
table tr td input, table tr td textarea {outline: none;border: 0px none;height:92%;}
table tr th {color:white;
text-shadow: 1px 1px darkgray;
padding: 2px 8px 2px 8px;
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}

JavaScript

$('input').bind('paste', function (e) {
    var $start = $(this);
   // alert(JSON.stringify($(this));
    var source

    //check for access to clipboard from window or event
    if (window.clipboardData !== undefined) {
        source = window.clipboardData
    } else {
        source = e.originalEvent.clipboardData;
    }
    var data = source.getData("Text");
    if (data.length > 0) {
        if (data.indexOf("\t") > -1) {
            var columns = data.split("\n");
            $.each(columns, function () {
                var values = this.split("\t");
                $.each(values, function () {
                    $start.val(this);
                    if ($start.closest('td').next('td').find('input,textarea')[0] != undefined || $start.closest('td').next('td').find('textarea')[0] != undefined) {
                    $start = $start.closest('td').next('td').find('input,textarea');
                    }
                    else
                    {
                     return false;  
                    }
                });
                $start = $start.closest('td').parent().next('tr').children('td:first').find('input,textarea');
            });
            e.preventDefault();
        }
    }
});































(function ($) {

    $.fn.enableCellNavigation = function () {

        var arrow = {
            left: 37,
            up: 38,
            right: 39,
            down: 40,
            enter: 13
        };

        // select all on focus
        this.find('input,select').keydown(function (e) {
            // shortcut for key other than arrow keys
            if ($.inArray(e.which, [arrow.left, arrow.up, arrow.right, arrow.down, arrow.enter]) < 0) {
                return;
            }

            var input = e.target;
            var td = $(e.target).closest('td');
            var moveTo = null;

            switch (e.which) {

                case arrow.left:
                    {
                        if (typeof...