JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column">
    <div class="popupConfigTabsContainer js-taboo">
        <div class="popupConfigTabsList js-tabsList tabsList">
            <div class="popupConfigTabOption js-tabOption is-active" data-tab-target="function">Function</div><!--
            --><div class="popupConfigTabOption js-tabOption" data-tab-target="design">Design & Copy</div>
        </div>
    
        <div class="popupConfigTabsSection js-tabsContainer">
            <div class="popupConfigTab js-tab is-active" data-tab-id="function">
                <div class="popupConfigUnit">
                <label class="fieldSection" for="">
                    <span clalss="fieldLabel">Capture name</span>
                    <span class="fieldWrapper">
                        <input class="field" type="text" />
                    </span>
                </label>
                </div>
    
                <div class="popupConfigUnit">
                <label class="fieldSection" for="">
                    <span clalss="fieldLabel">Require name</span>
                    <span class="fieldWrapper">
                        <input class="field" type="text" />
                    </span>
                </label>
                </div>
    
                <div class="popupConfigUnit">
                <label class="fieldSection" for="">
                    <span clalss="fieldLabel">Privacy Policy URL</span>
                    <span class="fieldWrapper">
                        <input class="field" type="text" />
                    </span>
                </label>
                </div>
    
                <div class="popupConfigUnit">
                <label class="fieldSection" for="">
                    <span clalss="fieldLabel">Redirect on submit</span>
                    <span class="fieldWrapper">
                        <input class="field checkBox" type="text" />
                    </span>
                </label>
                </div>
                
               ...

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: helvetica;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.fieldSection, .fieldLabel, .fieldWrapper, .field {
    display: block;
}

.fieldSection {
    margin-bottom: .6em;
}

.field {
    width: 100%;
    border: 1px solid #666;
    padding: .5em;
    border-radius: 2px;
    -webkit-appearance: none;
    background-color: #fff;
}

.column {
    width: 350px;
}

.popupConfigTabOption {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    border-bottom: 2px solid #999;
    cursor: pointer;
}

.popupConfigTabOption.is-active {
    border-bottom-color: #222;
}

.popupConfigTab {
    display: none;
    padding: 2em;
}

.popupConfigTab.is-active {
    display: block;
}

.popupConfigAccordionToggle,
.popupConfigSubAccordionToggle,
.popupConfigSubSubAccordionToggle {
    cursor: pointer;
}

.popupConfigAccordionBody,
.popupConfigSubAccordionBody,
.popupConfigSubSubAccordionBody {
    display: none;
}

.popupConfigSubSubAccordion.is-active .popupConfigSubSubAccordionBody,
.popupConfigSubAccordion.is-active .popupConfigSubAccordionBody,
.popupConfigAccordion.is-active .popupConfigAccordionBody {
    display: block;
}

JavaScript

//tabs function
$(function () {
    var $taboos = $('.js-taboo');

    $taboos.each(function () {
        var $taboo = $(this),
            $tabsList = $taboo.children('.js-tabsList'),
            $tabOptions = $tabsList.children('.js-tabOption'),
            $tabsContainer = $taboo.children('.js-tabsContainer'),
            $tabs = $tabsContainer.children('.js-tab'),
            
            $activeTabOption = $tabOptions.filter('.is-active'),
            $activeTab = $tabs.filter('.is-active');
        
        $tabOptions.on('click', function ( e ) {
            var $tabOption = $(e.target),
                target_tab_id = $tabOption.data('tab-target'),
                $targetTab = $tabs.filter('[data-tab-id=' + target_tab_id + ']');
            
            $activeTabOption.removeClass('is-active');
            $activeTab.removeClass('is-active');
    
            $activeTabOption = $tabOption.addClass('is-active');
            $activeTab = $targetTab.addClass('is-active');
        });
    });
});


//accordion function

$(function () {

    var $accordions = $('.js-accordion');
    
    $accordions.each(function () {
        var $accordion = $(this),
            $toggle = $accordion.children('.js-accordionToggle'),
            $body = $accordion.children('.js-body'),
            $subAccordions = $accordion.find('.js-accordion');
        
        $toggle.on('click', function () {
            if ( $accordion.hasClass('is-active') ) {
                $accordion.removeClass('is-active');
                $subAccordions.removeClass('is-active');
            } else {
                $accordion.addClass('is-active');
            }
        });
    });
});