JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<table class="tabs-wrapper">
    <tr id="tabs">
        <td id='natural_tab_switcher' class="active">
            <label>
                <input id="natural" type="radio" name="tab" checked="checked" />&nbsp;физическое лицо</label>
        </td>
        <td id='juridical_tab_switcher'>
            <label>
                <input id="juridical" type="radio" name="tab" />&nbsp;юридическое лицо</label>
        </td>
    </tr>
    <tr id="content-blocks">
        <td id="blocks-wrapper" class="right" colspan="2">
            <div id="natural-tab" class="active">
                <table class="simple-form">
                    <tr>
                        <td>
                            <label>Фамилия</label>
                        </td>
                        <td>
                            <input type="text" value="Константинопольский" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Имя</label>
                        </td>
                        <td>
                            <input type="text" value="Константин" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Отчество</label>
                        </td>
                        <td>
                            <input type="text" value="Константинович" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Адрес</label>
                        </td>
                        <td>
                            <input style="width:612px;" type="text" value="999888, Россия, Петропавловск-Камчатский, Ленинградское шоссе, 37б" />
                        </td>
                    </tr>
                </table>
            </div>
            <div id="juridical-tab">
                <table class="simple-form">
                   ...

CSS

.tabs-wrapper, .simple-form, .tabs-wrapper tr, .simple-form tr, .tabs-wrapper td, .simple-form td {
    border: 0;
    border-spacing: 0;
}
.tabs-wrapper, td[id$='_tab_switcher'] {
    background: #e6ebf0;
}
.tabs-wrapper {
    border-radius: 10px;
    padding: 5px;
    width: 734px;
}
.tabs-wrapper * {
    font-family: Arial, Helvetica, Verdana, sans-serif;
}
#tabs label, #tabs label input {
    height: 16px;
    line-height: 16px;
}
#tabs label {
    display: block;
    font-size: 14px;
    vertical-align: top;
}
#tabs label input {
    margin: 0;
}
td[id$='_tab_switcher'], #blocks-wrapper.left {
    border-top-left-radius: 8px;
}
td[id$='_tab_switcher'], #blocks-wrapper.right {
    border-top-right-radius: 8px;
}
td[id$='_tab_switcher'] {
    height: 52px;
    text-align: center;
    vertical-align: middle;
    width: 365px;
}
td[id$='_tab_switcher'].active, #blocks-wrapper {
    background: #ffffff;
}
#blocks-wrapper {
    padding: 15px;
}
div[id$='-tab'], div[id$='-tab'] * {
    font-size: 12px;
}
div[id$='-tab'] {
    display: none;
}
div[id$='-tab'].active {
    display: block;
}
.simple-form {
    width: 694px;
}
.simple-form td {
    padding: 7px 0;
}
.simple-form label {
    color: #333333;
}
.simple-form input[type="text"] {
    border: 1px solid #9e9e9e;
    border-radius: 5px;
    height: 24px;
    line-height: 24px;
    outline: none;
    padding: 0 5px;
}
#natural-tab .simple-form tr td input[type="text"] {
    width: 200px;
}
#natural-tab .simple-form tr td:first-child {
    width: 70px;
}
#juridical-tab .simple-form tr td input[type="text"] {
    width: 482px;
}
#juridical-tab .simple-form tr td:first-child {
    width: 200px;
}

JavaScript

$(function () {
    var switchers = $("input[name='tab']");

    switchers.click(function () {
        var tabs = $("td[id$='_tab_switcher']"),
            currentTab = $(this).closest("td"),
            blocksWrapper = $("#blocks-wrapper"),
            block = $("div[id$='-tab']"),
            currentBlock = $("#" + $(this).attr("id") + "-tab");

        tabs.removeClass('active');
        block.removeClass('active');
        currentTab.addClass('active');
        currentBlock.addClass('active');

        switch (currentBlock.id) {
            case 'natural-tab':
                blocksWrapper.attr('class', 'right');
                break;
            case 'juridical-tab':
                blocksWrapper.attr('class', 'left');
                break;
        }
    });
});