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'>y </div>
    <div id='show-tab-0-1-2-1' style='display:none'>2 </div>
    <div id='show-tab-0-1-3-1' style='display:none'>k </div>
    <br />
    <!-- -->
    
     </div>
    
<!-- contents Tab 0-2-->
<div id='show-tab-0-2' style='display:none'> 

    
    <!-- -->
        <!-- Tab 2-1-->
<input type="radio" name="tabs-group-0-2" class="radio" value="option-0-2-1-1" id="tab-0-2-1">
    <label for="tab-0-2-1">Tab 0-2-1</label>
    

    
    <!-- Tab 2-2-->
<input type="radio" name="tabs-group-0-2" class="radio" value="option-0-2-1-2" id="tab-0-2-2">
    <label for="tab-0-2-2">Tab 0-2-2</label>
   ...

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;
}

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');
    }
}); 
*/

$('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');
    }
});





$('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');
    }
});

$('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');
    }
});

$('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');
    }
});





$('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');
    }
});

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

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