JSFiddle - React, Tailwind, and code Playground

by naykris

HTML

<input type="radio" name="tabs" id="tab1" checked>
<input type="radio" name="tabs" id="tab2">
<label for="tab1">tab–1</label>
<label for="tab2">tab–2</label>
<div class="tab-block1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam, commodi mollitia!</div>
<div class="tab-block2">Delectus earum, amet fugit? Numquam, deleniti. Mollitia aliquam eligendi consequatur laudantium quis!</div>

CSS

div,
input[type="radio"]{
    display: none;
}

div{
    padding: 16px;
    background-color: yellow;
}

label{
    color: blue;
    padding: 4px 16px;
}

#tab1:checked ~ .tab-block1,
#tab2:checked ~ .tab-block2{
    display: block;
}

#tab1:checked ~ label[for="tab1"],
#tab2:checked ~ label[for="tab2"]{
    color:red;
    background-color: yellow;
}