JSFiddle - React, Tailwind, and code Playground

by Tahsis Claus

HTML

<div class="panelbar">
    <input type="radio" name="panel" id="panelone" />
    <label for="panelone">Click Me!</label>
    <div>Content</div>
    <input type="radio" name="panel" id="paneltwo" />
    <label for="paneltwo">Click Me!</label>
    <div>Content</div>
    <input type="radio" name="panel" id="panelthree" />
    <label for="panelthree">Click Me!</label>
    <div>Content</div>
</div>

CSS

.panelbar {
    width:300px;
    height:500px;
    background-color: black;//this should not be visible except during transitions
}
.panelbar > input[type="radio"] {
    display:none;
}
.panelbar > label {
    display:block;
    height: 30px;
    width: 100%;
    background-color: blue;
}
.panelbar > div {
    height: 0;
    overflow: hidden;
    background-color:pink;
    transition:height 2s;
}
.panelbar > input:checked + label + div, .panelbar > input:indeterminate:last-of-type + label + div {
    height: calc(100% - 90px);
}