JSFiddle - React, Tailwind, and code Playground

by p4bl1t0

HTML

<form action="">
    <label for="check">Mostrar radio button</label>
<input id="check" type="checkbox" />
<span class="oculta">Primer Ejemplo</span>
    <div>
        <ul class="tab">
            <li>
                <input  type="radio" name="tab" id="tab1" class="radio" checked="checked" />
                <label for="tab1">Tab 1</label>
                <div>Contenido 1  Contenido 1  Contenido 1  Contenido 1  Contenido 1  Contenido 1  Contenido 1  Contenido 1        </div>
            </li>
             <li>
                <input  type="radio" name="tab" id="tab2" class="radio" />
                <label for="tab2">Tab 2</label> 
                 <div>Contenido tab 2  Contenido tab 2  Contenido tab 2  Contenido tab 2  Contenido tab 2  Contenido tab 2  Contenido tab 2  Contenido tab 2  Contenido tab 2  Contenido tab 2  Contenido tab 2  Contenido tab 2  Contenido tab 2             </div>
            </li> 
             <li>
                <input  type="radio" name="tab" id="tab3" class="radio" />
                <label for="tab3">Tab 3</label> 
                 <div>algo en la 3  algo en la 3  algo en la 3  algo en la 3  algo en la 3  algo en la 3  algo en la 3  algo en la 3  algo en la 3  algo en la 3  algo en la 3  algo en la 3            </div>
            </li>  
        </ul>
    </div>
</form>

CSS

#check ~ span{
    display:none;
}
#check:checked ~ span
{
    display:inline;
}
.tab{
    position:relative;
}
.tab li{
     display:inline-block;
}
 .tab label{
     border:1px solid black;
    padding:0.5em;
    cursor:pointer;
} 
.tab div{
    position:absolute;
    top:2.5em;
    left:0;
    border:1px solid blue;
}
.radio { width:0; height:0; overflow:hidden; position:absolute; }
.radio.show{width:auto;height:auto; overflow:visible; position:static;}
.radio  ~ label {
    display:inline-block;
}
.radio  ~ label  ~ div{
    display:none;
} 
  .radio:checked  ~ label  ~ div{
    display:block;
}

JavaScript

$('#check').click(function(){
    if($(this).is(':checked'))
        $('.radio').addClass('show');
    else
         $('.radio').removeClass('show'); 
});