JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs-1" class="tabs"> 

    <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
    <input id="tab-1-2" name="tabs-group-1" type="radio" />
    <input id="tab-1-3" name="tabs-group-1" type="radio" />
    
    <label for="tab-1-1">Tab 1-1</label>
    <label for="tab-1-2">Tab 1-2</label>
    <label for="tab-1-3">Tab 1-3</label>
    
    <div>#1</div>
    <div>#1<br>#2</div>
    <div>#1<br>#2<br>#3</div>
    
</div>

<br>... lorem ipsum ...<br><br>

<div id="tabs-2"class="tabs">

    <input id="tab-2-1" name="tabs-group-2" type="radio" checked />
    <input id="tab-2-2" name="tabs-group-2" type="radio" />
    <input id="tab-2-3" name="tabs-group-2" type="radio" />
    <input id="tab-2-4" name="tabs-group-2" type="radio" />
    <input id="tab-2-5" name="tabs-group-2" type="radio" />
    
    <label for="tab-2-1">Tab 2-1</label>
    <label for="tab-2-2">Tab 2-2</label>
    <label for="tab-2-3">Tab 2-3</label>
    <label for="tab-2-4">Tab 2-4</label>
    <label for="tab-2-5">Tab 2-5</label>
    
    <div>#1</div>
    <div>#1<br>#2</div>
    <div>#1<br>#2<br>#3</div>
    <div>#1<br>#2<br>#3<br>#4</div>
    <div>#1<br>#2<br>#3<br>#4<br>#5</div>
    
</div>

<br>... lorem ipsum ...<br><br>

CSS

/* webkit fix */

body ~ :checked {}

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

/* tabs-1 */

#tabs-1 :checked + * + * + label { background-color:#adf;border-color:#adf}
#tabs-1 :checked + * + * + * + * + * + div { display: block }

/* tabs-2  - more tabs need more '+ * +'  */

#tabs-2 :checked + * + * + * + * + label { background-color:#adf;border-color:#adf}
#tabs-2 :checked + * + * + * + * + * + * + * + * + * + div { display: block }