JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-group">
    <div class="tab">
        <input id="tab-one" type="radio" name="tabs"/>
        <label for="tab-one"> MENU </label>
        <div class="tab-content">
            <p> this is where we put our header once if work out how to use css to do that!jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj </p>

        </div>
    </div>
    <div class="tab">
        <input id="tab-two" type="radio" name="tabs"/>
        <label for="tab-two"> MENU </label>
        <div class="tab-content">
            <p> this is where we put our header once if work out how to use css to do that!</p>

        </div>
    </div>
</div>

SCSS

.tab-group{
    margin: 0 auto;
    max-width:40em;
    width:100%;
}

.tab{
    position:relative;
    width: 100%;
}

/*.tab input {
    position:absolute;
    left:0;
    top:0;
    z-index:-999;
}*/

.tab label {
    background: teal;
    color: white;
    display:block;
    font-weight:bold;
    line-height: 3;
    padding-left: .5em;
    margin-bottom: .5em;
    transition: letter-spacing .55s;    
}

.tab input:focus + label,
.tab label:hover {
    background:blue;
    letter-spacing:1px;
}

.tab-content {
    max-height: 0;
    overflow: hidden;
    transition: all .35s;
}

.tab-content p {
    margin:1em 0;
}

.tab input:checked ~ .tab-content {
    max-height:6.25em;
}