/* Multi Tabs CSS Only by igniel.com
Source Code: https://igniel.com/2022/02/tabs-css-only.html
*/
.ignielMultiTab {
border: 0;
margin: 1.5rem 0;
padding: 0;
}
.ignielMultiTab input, .ignielMultiTab .content > div {
display: none;
}
.ignielMultiTab label, .ignielMultiTab .content {
border-style: solid;
border-width: 1px;
}
.ignielMultiTab input:checked + label, .ignielMultiTab .content {
border-color: #ddd;
}
.ignielMultiTab .label {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
max-width: calc(100vw - 2.5rem);
overflow: auto;
}
.ignielMultiTab label {
background-color: #ededed;
border-color: transparent;
border-bottom: 1px solid #ddd;
color: #666;
cursor: pointer;
display: inline-block;
float: left;
padding: .65rem 1.25rem;
position: relative;
top: 1px;
transition: all .3s ease;
}
.ignielMultiTab input:checked + label {
background-color: transparent;
border-bottom: 1px solid #fff;
color: #1d1d1d;
font-weight: bold;
}
.ignielMultiTab .content {
clear: both;
padding: 1.5rem 1.25rem;
}
.ignielMultiTab #tab1:checked ~ .content .tab1,
.ignielMultiTab #tab2:checked ~ .content .tab2,
.ignielMultiTab #tab3:checked ~ .content .tab3,
.ignielMultiTab #tab4:checked ~ .content .tab4,
.ignielMultiTab #tab5:checked ~ .content .tab5 {
display: block;
}
<!-- Multi Tabs CSS Only by igniel.com -->
<fieldset class="ignielMultiTab">
<input id="tab1" name="mTab" type="radio" checked="checked"/>
<label for="tab1">Satu</label>
<input id="tab2" name="mTab" type="radio"/>
<label for="tab2">Dua</label>
<input id="tab3" name="mTab" type="radio"/>
<label for="tab3">Tiga</label>
<input id="tab4" name="mTab" type="radio"/>
<label for="tab4">Empat</label>
<input id="tab5" name="mTab" type="radio"/>
<label for="tab5">Lima</label>
<div class="content">
<div class="tab1">
(1) ISI SATU
</div>
<div class="tab2">
(2) ISI DUA
</div>
<div class="tab3">
(3) ISI TIGA
</div>
<div class="tab4">
(4) ISI EMPAT
</div>
<div class="tab5">
(5) ISI LIMA
</div>
</div>
</fieldset>
Gabung dalam percakapan