JSFiddle - React, Tailwind, and code Playground

by James

HTML

<form id='form-id'>
    <!-- Declares that there is a tab here <input type="radio" name="tab group" class="radio" value="option1" id="Which Tab">
    <label for="Which Tab">Tab 0-1</label>
	
Says what is inside of the tab	

<div id='show-me identifier' style='display:none'>Hello </div>
-->
    <!-- Tab 1-->
    <input type="radio" name="tabs-group-0" class="radio" value="option-0-1" id="tab-0-1">
    <label for="tab-0-1">Tab 0-1</label>
    <!-- Tab 2-->
    <input type="radio" name="tabs-group-0" class="radio" value="option-0-2" id="tab-0-2">
    <label for="tab-0-2">Tab 0-2</label>
    <!-- Tab 3-->
    <input type="radio" name="tabs-group-0" class="radio" value="option-0-3" id="tab-0-3">
    <label for="tab-0-3">Tab 0-3</label>
</form>
<!-- contents Tab 0-1-->
<div id='show-tab-0-1' style='display:none'>
    <!-- -->
    <!-- Tab 1-1-->
    <input type="radio" name="tabs-group-0-1" class="radio" value="option-0-1-1-1" id="tab-0-1-1">
    <label for="tab-0-1-1">Tab 0-1-1</label>
    <!-- Tab 1-2-->
    <input type="radio" name="tabs-group-0-1" class="radio" value="option-0-1-1-2" id="tab-0-1-2">
    <label for="tab-0-1-2">Tab 0-1-2</label>
    <!-- Tab 1-3-->
    <input type="radio" name="tabs-group-0-1" class="radio" value="option-0-1-1-3" id="tab-0-1-3">
    <label for="tab-0-1-3">Tab 0-1-3</label>
    <div id='show-tab-0-1-1-1' style='display:none'>
        <!-- Tab 1-1-1-->
        <input type="radio" name="tabs-group-0-1-1" class="radio" value="option-0-1-1-1" id="tab-0-1-1-1">
        <label for="tab-0-1-1-1">Tab 0-1-1-1</label>
        <!-- Tab 1-1-2-->
        <input type="radio" name="tabs-group-0-1-1" class="radio" value="option-0-1-1-2" id="tab-0-1-1-2">
        <label for="tab-0-1-1-2">Tab 0-1-1-2</label>
        <!-- Tab 1-1-3-->
        <input type="radio" name="tabs-group-0-1-1" class="radio" value="option-0-1-1-3" id="tab-0-1-1-3">
        <label for="tab-0-1-1-3">Tab 0-1-1-3</label>
        <div id='show-tab-0-1-1-1'...

CSS

/* all tabs */

/*.tabs input {display:none}*/
 .tabs label {
    background-color:#ccc;
    border:solid 2px #fff;
    cursor: pointer;
    display:inline-block;
    padding:5px 15px;
}
.tabs div {
    display:none;
    border:solid 2px #adf;
    padding: 15px;
}
#div0 :checked + * + * + * label {
    background-color:#adf;
    border-color:#adf
}
#div0 :checked + * + * + * + * + * + * div {
    display: block
}
/* tabs-1 */
 #div-0-1 :checked + * + * + label {
    background-color:#adf;
    border-color:#adf
}
#div-0-1 :checked + * + * + * + * + * + div {
    display: block
}
/* tabs-0-1-1 */
 #div-0-1-1 :checked + * + * + label {
    background-color:#adf;
    border-color:#adf
}
#div-0-1-1 :checked + * + * + * + * + * + div {
    display: block
}
/* tabs-2  - more tabs need more '+ * +'  */
 #div2 :checked + * + * + * + * + label {
    background-color:#adf;
    border-color:#adf
}
#div2 :checked + * + * + * + * + * + * + * + * + * + div {
    display: block
}
/* tabs-3  - You need one + seperated by one * per tab in a group. '+ * +'  */
 #div3 :checked + * + * + label {
    background-color:#adf;
    border-color:#adf
}
#div3 :checked + * + * + * + * + * + div {
    display: block
}
/* tabs-4  - All of the '+ * +' is used to reference the tab content being shown */
 #div4 :checked + * + * + label {
    background-color:#adf;
    border-color:#adf
}
#div4 :checked + * + * + * + * + * + div {
    display: block
}
td {
    color: black;
    border:solid 2px #adf;
    padding: 15px;
}
<input type="radio" name="tabs-group-0-3-1-2" class="radio" value="option-0-3-1-2-1" id="tab-0-3-1-2-1"> <label for="tab-0-3-1-2-1">Tab 0-1-3-1-2-1</label> <div id='show-tab-0-3-1-2-1' style='display:none'>k </div> $('input[name=tabs-group-0-3-1-2]').click(function () {
    if (this.id=="tab-0-3-1-2-1") {
        $("#show-tab-0-3-1-2-1").show('slow');
    }
    else {
        $("#show-tab-0-3-1-2-1").hide('slow');
    }
}
);

JavaScript

// requires JQuery Uncheckable radio buttons 
(function ($) {

    $.fn.uncheckableRadio = function () {

        return this.each(function () {
            $(this).mousedown(function () {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function () {
                if ($(this).data('wasChecked')) this.checked = false;
            });
        });

    };

})(jQuery);

$('input[type=radio]').uncheckableRadio();

///Code about Tabs

/*
Says what the tab does	

$('input[name=tab group]').click(function () {
    if (this.id == "Which Tab") {
        $("#show-me identifier").show('slow');
    } else {
        $("#show-me identifier").hide('slow');
    }
}); 
*/

//show-tab-0-1 from tab-0-1
$('input[name=tabs-group-0]').click(function () {
    if (this.id == "tab-0-1") {
        $("#show-tab-0-1").show('slow');
    } else {
        $("#show-tab-0-1").hide('slow');
    }
});

//show-tab-0-1-1-1 from tab-0-1-1
$('input[name=tabs-group-0-1]').click(function () {
    if (this.id == "tab-0-1-1") {
        $("#show-tab-0-1-1-1").show('slow');
    } else {
        $("#show-tab-0-1-1-1").hide('slow');
    }
});

//show-tab-0-1-2-1 from tab-0-1-2
$('input[name=tabs-group-0-1]').click(function () {
    if (this.id == "tab-0-1-2") {
        $("#show-tab-0-1-2-1").show('slow');
    } else {
        $("#show-tab-0-1-2-1").hide('slow');
    }
});

//show-tab-0-1-3-1 from tab-0-1-3
$('input[name=tabs-group-0-1]').click(function () {
    if (this.id == "tab-0-1-3") {
        $("#show-tab-0-1-3-1").show('slow');
    } else {
        $("#show-tab-0-1-3-1").hide('slow');
    }
});

//show-tab-0-2 from tab-0-2
$('input[name=tabs-group-0]').click(function () {
    if (this.id == "tab-0-2") {
        $("#show-tab-0-2").show('slow');
    } else {
        $("#show-tab-0-2").hide('slow');
    }
});

//show-tab-0-2-1-1 from tab-0-2-1
$('input[name=tabs-group-0-2]').click(function () {
    if (this.id == "tab-0-2-1") {
       ...