<div class="tabsC">
<input type="radio" class="hidden" id="multitabs1" name="mtabs" checked>
<input type="radio" class="hidden" id="multitabs2" name="mtabs">
<input type="radio" class="hidden" id="multitabs3" name="mtabs">
<div class="tabsh">
<label for="multitabs1" class="tabsnk" id="tab1">HTML</label>
<label for="multitabs2" class="tabsnk" id="tab2">CSS</label>
<label for="multitabs3" class="tabsnk" id="tab3">JAVASCRIPT</label>
</div>
<div class="tabscont">
<div class="tabscont1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus viverra orci massa, id consequat nibh luctus
vitae. Cras nec lacus eget metus pellentesque facilisis. In
varius arcu in mollis posuere. Nunc gravida neque egestas
sapien gravida mollis. Maecenas in massa eu ligula sagittis
pellentesque. Donec malesuada congue turpis, eu venenatis
lectus imperdiet non. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Suspendisse ut pharetra ligula.
Nunc vulputate bibendum posuere. Integer massa nisi, dictum
sed purus ut, commodo bibendum felis. Phasellus sit amet
quam at quam cursus ultrices vel sit amet dolor.
Pellentesque ac euismod diam. Pellentesque rhoncus
pellentesque feugiat. Vivamus vel lorem pellentesque arcu
imperdiet rutrum. Praesent eu orci non erat tempus sodales
at vel enim. Aliquam erat volutpat. Aenean tincidunt tellus
ac viverra blandit. Sed mattis mi sem, id euismod tortor
vulputate ut. Cras vestibulum iaculis ex ut pellentesque.
Nullam non odio sed ante iaculis maximus. Proin finibus
tortor vitae dictum porta. Phasellus ante ante, auctor at
blandit quis, facilisis eu tellus. Etiam pulvinar, ligula ac
pellentesque lacinia, leo dolor egestas ante, at interdum
quam mi eu quam. Donec sed dolor risus.
</div>
<div class="tabscont2">INI ISI CSS</div>
<div class="tabscont3">INI ISI JAVASCRIPT</div>
</div>
</div>
.hidden {
display: none;
}
.tabsC {
font-family: arial;
background: #f6f6f6;
color: #333;
height: 460px;
margin: 15px;
overflow-y: auto;
}
.tabsC .tabsh {
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
}
.tabsC .tabsh:after {
content: "</>";
margin-left: auto;
padding: 10px 15px;
}
.tabsC .tabsh > * {
padding: 13px 17px;
margin-bottom: -1px;
border-bottom: 1px solid #e6e6e6;
}
.tabsC .tabscont {
padding: 25px 23px;
line-height: 1.7em;
}
.tabsC .tabscont > * {
display: none;
}
.tabsC input[id*="1"]:checked ~ .tabsh label[for*="1"],
.tabsC input[id*="2"]:checked ~ .tabsh label[for*="2"],
.tabsC input[id*="3"]:checked ~ .tabsh label[for*="3"] {
color: #1e1e1e;
border-bottom: 1px solid #0b57cf;
}
.tabsC input[id*="1"]:checked ~ .tabscont .tabscont1,
.tabsC input[id*="2"]:checked ~ .tabscont .tabscont2 {
display: block;
}
.halaman.breakWord{
word-wrap: break-word;
}
HTML
CSS
JS