JSFiddle - React, Tailwind, and code Playground

by pphheerroonn

HTML

<div class="row">
    <article class="tabs">
        <input type="radio" checked="checked" id="rad-tab4" name="group-two"></input>
        <label for="rad-tab4" class="tab_block">
            <section>
                 <h2>Tab 1</h2>

                <div>
                    <p>This content appears on tab 1.</p>
                    <p>This tab is <b>last</b> in the markup so that it can be styled as active tab on page load.</p>
                    <p>Some more content...</p>
                </div>
            </section>
        </label>
        <input type="radio" id="rad-tab5" name="group-two"></input>
        <label for="rad-tab5" class="tab_block">
            <section>
                 <h2>Tab 2</h2>

                <div>
                    <p>This content appears on tab 2.</p>
                </div>
            </section>
        </label>
        <input type="radio" id="rad-tab6" name="group-two"></input>
        <label for="rad-tab6" class="tab_block">
            <section>
                 <h2>Tab 3</h2>

                <div>
                    <p>This content appears on tab 3.</p>
                    <p>Some more content...</p>
                </div>
            </section>
        </label>
        <div class="clear-float"></div>
    </article>
</div>

CSS

body, html {
    margin: 0px;
    padding: 0px;
}
body {
    font: 62.5%/1.5 Georgia, serif;
    margin: 10em 0 0;
}
h2 {
    font-size: 2em;
}
p {
    font-size: 1.6em;
}
 input[type=radio] {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
}
.clear-float {
    clear: both;
}
.tab_block ~ .tab_block h2 {
    left: 50%;
    transform: translate(-50%, -100%);
}
.tab_block ~ .tab_block ~ .tab_block h2 {
    left: auto;
    right: 0px;
    transform: translate(0%, -100%);
}
 .row {
    width: 40em;
    margin: 0 auto;
    position: relative;
    margin-top: 5em;
}
.tab_block div {
    display: none;
    background-color: white;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #DDD;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    padding: 1em 2em;
    width: 40em;
}
.tab_block h2 {
    position: absolute;
    top: 1px;
    transform: translateY(-100%);
    background-color: #DDD;
    border-radius: 5px 5px 0 0;
    line-height: 2em;
    margin: 0;
    padding: 0;
    width: 6em;
    border: 1px solid #DDD;
    border-bottom-color: #FFF;
    box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
    transition: all 500ms ease;
    text-align: center;
    cursor: pointer;
    border-bottom: none;
}
.tab_block:last-child div {
    border: 1px solid #DDD;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    padding: 1em 2em;
    height: auto;
    overflow: visible;
    visibilty: visible;
    width: 40em;
}
 input[type=radio]:checked + label h2 {
    background-color: white;
}
 :checked + label div {
    display: block;
}