JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
    <input type="radio" name="tab" id="tab1" checked>
    <label for="tab1">One</label>
    <input type="radio" name="tab" id="tab2">
    <label for="tab2">Two</label>
    <input type="radio" name="tab" id="tab3">
    <label for="tab3">Three</label>
    <div class="articles">
    <article class="tab1">
        <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 class="tab2">
        <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 class="tab3">
        <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>
</div>

CSS

html {
    background-color: #7D7C67;
}
.tabs {
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
}
.tabs label {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    display: inline-block;
    padding: 10px 16px;
    background-color: #525252;
    color: #DBDBD3;
    font: 20px 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;
}
.articles {position: relative;}
.tabs article {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    background-color: #F7EEC6;
    border-top: 5px solid #B8B63E;
    padding: 0 18px 1px;
}
#tab1:checked ~ .articles .tab1,
#tab2:checked ~ .articles .tab2,
#tab3:checked ~ .articles .tab3 {
    opacity: 1;
}

@media (max-width: 600px) {
    .tabs label {
        width: 100%;
        display: block;
        border-bottom: 1px solid #777;
    }
    .tabs article {
        border-top: none;
    }
    .tabs {
        width: 100%;
        min-width: 320px;
    }
    html, body {
        margin: 0;
        padding: 0;
    }
}