JSFiddle - React, Tailwind, and code Playground

by Trimax

HTML

<!-- PESTAĂ‘AS CON CONTENIDOS -->
<div class="tabs">
    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1">Tab One</label>
        <div class="content">stuff One</div>
    </div>
    <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-1">
        <label for="tab-2">Tab Two</label>
        <div class="content">stuff Two</div>
    </div>
    <div class="tab">
        <input type="radio" id="tab-3" name="tab-group-1">
        <label for="tab-3">Tab Three</label>
        <div class="content">stuff Three</div>
    </div>
</div>

CSS

.tabs {
    position: relative;
    min-height: 400px;
    /* This part sucks */
    clear: both;
    margin: 25px 0;
}
.tab {
    float: left;
}
.tab label {
    background: linear-gradient(white, grey);
    padding: 10px;
    border: 1px solid #ccc;
    margin: 0 10px 0;
    position: relative;
    left: 1px;
    border-radius: 5px 5px 0 0;
}


input {
    display: none;
}

.content {
    position: absolute;
    top: 29px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    margin: 2px 0px 0px 0px;
    padding: 20px;
    border: 1px solid #CCC;
}
[type=radio]:checked ~ label{
    background: linear-gradient(#EEE, white);
    border-bottom: 1px solid white;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
}