JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
    <input type="radio" name="tab1" id="one" checked><label for="one">One</label>
    <input type="radio" name="tab1" id="two"><label for="two">Two</label>
    <input type="radio" name="tab1" id="three"><label for="three">Three</label>
    <article>
        <h1>Tab 1 heading</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit natus asperiores necessitatibus animi et perspiciatis aliquid tempore doloremque soluta vero. Delectus officia, nulla atque veniam expedita cumque beatae doloremque ipsa?
        </p>
    </article>
    <article>
        <h2>Tab 2 heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore quo porro ex, cum numquam corporis sed perferendis neque eveniet autem vel? Suscipit doloremque, distinctio doloribus nostrum ad error voluptatibus!
        </p>
    </article>
    <article>
        <h2>Tab 3 heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere ad impedit nostrum, aliquid eaque, quos alias commodi aliquam et. Consectetur aspernatur voluptatibus sapiente expedita excepturi, dignissimos repellendus debitis adipisci incidunt.
        </p>
    </article>
</div>

CSS

html {
    background-color: #7D7C67;
}
.tabs {
    width: 80%;
    min-width: 600px;
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
}
.tabs label {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    display: inline-block;
    width: 20%;
    height: 50px;
    background-color: #525252;
    color: #DBDBD3;
    font: 20px/50px tahoma;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
}
.tabs label:hover {
    background-color: #727272;
}
.tabs input[type="radio"]:checked + label {
    background-color: #B8B63E;
}
.tabs input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + label + input[type="radio"] +
    label + input[type="radio"] + label + article,
input[type="radio"]:checked + label + input[type="radio"] +
    label + article + article,
input[type="radio"]:checked + label + article + article + article {
    opacity: 1;
}
.tabs article {
    position: absolute;
    top: 50px;
    opacity: 0;
    transition: opacity 0.5s ease;
    background-color: #F7EEC6;
    border-top: 5px solid #B8B63E;
    padding: 0 18px 1px;
}