JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Здесь лежит спрятанный див с пустой формой, в конечном итоге в ней будет много кода C#-->
<div style="display: none">
<table id="tabulatable">
    <tr>
        <td>
            Поле А
                </td>
        <td>
            <input type="text">
                </td>
            </tr>
     <tr>
        <td>
            Поле Б
                </td>
        <td>
            <input type="text">
                </td>
            </tr>
    <tr>
        <td>
            Поле В
                </td>
        <td>
            <input type="text">
                </td>
            </tr>
        </table>
         </div>    
<!-- Здесь у нас сам код Табов -->
        
        <div id="tabcontainer">
            <ul id="tabul">
                <li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
            </ul>
            <div id="tabcontent"></div>
        </div>

CSS

#main {
                background: #0099cc;
                margin-top: 0;
                padding: 2px 0 4px 0;
                text-align: center;
            }
            #main a {
                color: #ffffff;
                text-decoration: none;
                font-size: 12px;
                font-weight: bold;
                font-family: Arial;
            }
            #main a:hover {
                text-decoration: underline;
            }
            #tabcontainer {
                margin: 0 auto;
                width: 800px;
                margin-top: 50px;
            }
            #tabul {
                padding: 0;
                margin: 0;
                padding: 5px 0;
                z-index: 10;
            }
            #tabul li {
                display: inline;
                -webkit-border-radius: .3em .3em 0 0;
                -moz-border-radius: .3em .3em 0 0;
                border-radius: .3em .3em 0 0;
                cursor: pointer;
            }
            .ntabs {
                background: #BDC7D5;
                margin-right: 1px;
                font-size: 11px;
                font-weight: bold;
                color: #333;
                border: 1px solid #BDC7D5;
                padding: 5px 3px 5px 8px;
            }
            .add {
                padding: 5px 8px;
            }
            #addtab {
                font-size: 16px;
                text-decoration: none;
                position: relative;
                top: 2px;
                color: #333;
            }
            #addtab:hover {
                color: #999;
            }
            .ctab {
                background: #E7EDF6;
                position: relative;
                top: 2px;
                border-bottom-width: 0;
            }
            .closetab {
                text-decoration: none;
                color: #999;
                font-weight: bold;
                font-size: 14px;
                padding: 0 4px;
 ...

JavaScript

//Здесь код вкладок, взят отсюда http://ruseller.com/lessons/les1095/demo/index.html
$(function () {
            var total_tabs = 0;

            // Инициализируем первую закладку
            total_tabs++;
            addtab(total_tabs);

            $("#addtab, #litab").click(function () {
                total_tabs++;
                $("#tabcontent p").hide();
                addtab(total_tabs);
                return false;
            });

            function addtab(count) {
                var closetab = '<a href="" id="closetab' + count + '" class="closetab">&times;</a>';
                $("#tabul").append('<li id="t' + count + '" class="ntabs">Закладка ' + count + '&nbsp;&nbsp;' + closetab + '</li>');
                
                $("#tabcontent").append(document.getElementById('tabulatable'));

                $("#tabul li").removeClass("ctab");
                $("#t" + count).addClass("ctab");

                $("#t" + count).bind("click", function () {
                    $("#tabul li").removeClass("ctab");
                    $("#t" + count).addClass("ctab");
                    $("#tabcontent p").hide();
                    $("#c" + count).fadeIn('slow');
                });

                $("#closetab" + count).bind("click", function () {
                    // Активируем предыдущую закладку
                    $("#tabul li").removeClass("ctab");
                    $("#tabcontent p").hide();
                    $(this).parent().prev().addClass("ctab");
                    $("#c" + count).prev().fadeIn('slow');

                    $(this).parent().remove();
                    $("#c" + count).remove();
                    return false;
                });
            }
        });