Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis quam id suscipit faucibus. Duis eleifend lectus neque, a cursus dolor consectetur in.
Nullam eget rhoncus tortor, quis sollicitudin leo. Curabitur id maximus risus, at viverra tellus. Duis vehicula tincidunt maximus. Sed efficitur consequat mollis.
Curabitur pellentesque et dolor vitae pellentesque. In blandit porta eros eu vulputate. Phasellus luctus finibus elit et feugiat. Curabitur ac mollis massa, a iaculis purus. Nunc ac venenatis velit.
Phasellus ac tellus non justo auctor placerat. Morbi rhoncus vulputate lectus nec pharetra. Ut sapien ipsum, pretium et porttitor et, varius id felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<div class=demo>
<input type="radio" id="tab-1" name="tab" checked='checked' tabindex="0">
<label for='tab-1'>Tab 1</label>
<input type="radio" id="tab-2" name="tab" tabindex="0">
<label for='tab-2'>Tab 2</label>
<input type="radio" id="tab-3" name="tab" tabindex="0">
<label for='tab-3'>Tab 3</label>
<input type="radio" id="tab-4" name="tab" tabindex="0">
<label for='tab-4'>Tab 4</label>
<div class=article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis quam id suscipit faucibus. Duis eleifend lectus neque, a cursus dolor consectetur in. </p>
</div>
<div class=article>
<p>Nullam eget rhoncus tortor, quis sollicitudin leo. Curabitur id maximus risus, at viverra tellus. Duis vehicula tincidunt maximus. Sed efficitur consequat mollis. </p>
</div>
<div class=article>
<p>Curabitur pellentesque et dolor vitae pellentesque. In blandit porta eros eu vulputate. Phasellus luctus finibus elit et feugiat. Curabitur ac mollis massa, a iaculis purus. Nunc ac venenatis velit. </p>
</div>
<div class=article>
<p>Phasellus ac tellus non justo auctor placerat. Morbi rhoncus vulputate lectus nec pharetra. Ut sapien ipsum, pretium et porttitor et, varius id felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
*,
*::before,
*::after{
box-sizing: border-box
}
input{
position:absolute;
left:-9999px
}
.demo{
display:grid;
grid-template-areas:
"label article"
"label article"
"label article"
"label article";
background-color:#f2f2f2;
border:1px solid rgba(85, 85, 85, 0.15);
border-radius: .5rem;
box-shadow: 4px 4px 15px rgba(200,200,200,1);
overflow:hidden;
}
.article{
padding:1rem;
grid-area:article;
will-change: opacity;
transition: opacity 400ms;
}
input{position:absolute;left:-100vw}
input+label{
cursor: pointer;
text-align:center;
padding: 1rem 2rem;
background-color: #eaeaea;
transition: background-color 250ms;
font-size:calc(14px + .25vw);
}
input:checked+label {background-color:unset}
label:hover {
background-color: #dddddd;
}
#tab-1:checked ~ .article:not(:nth-of-type(1)),
#tab-2:checked ~ .article:not(:nth-of-type(2)),
#tab-3:checked ~ .article:not(:nth-of-type(3)),
#tab-4:checked ~ .article:not(:nth-of-type(4)) {opacity: 0}
@media (min-width:62.75rem){
.demo{
grid-template-areas:
"label label label label"
"article article article article"
}
input:not(:checked)+label{
border-bottom:1px solid #d8d8d8;
}
input+label:not(:last-of-type) {
border-right:1px solid #d8d8d8;
}
}