<!-- main wrapper -->
<div class="tabs">
<!-- radio block will be hidden, but will be used to control the tabs -->
<input class="tabs__radio" id="myTab1" type="radio" name="myTabs" value="1" checked>
<input class="tabs__radio" id="myTab2" type="radio" name="myTabs" value="2">
<input class="tabs__radio" id="myTab3" type="radio" name="myTabs" value="3">
<input class="tabs__radio" id="myTab10" type="radio" name="myTabs" value="10">
<!-- labels will be display as actual tabs -->
<label class="tabs__label" for="myTab1">Tab 1</label>
<label class="tabs__label" for="myTab2">Tab 2</label>
<label class="tabs__label" for="myTab3">Tab 3</label>
<label class="tabs__label" for="myTab10">Tab 10</label>
<!-- wrappers for tab's content -->
<div class="tabs__content">1. tab content...</div>
<div class="tabs__content">2. tab content...</div>
<div class="tabs__content">3. tab content...</div>
<div class="tabs__content">10. tab content...</div>
</div>
<a class="sb-link" href="//silvestarbistrovic.from.hr">silvestarbistrovic.from.hr</a>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.tabs {
height: calc(100vh - 50px);
}
.sb-link {
display: flex;
height: 50px;
align-content: center;
align-items: center;
justify-content: center;
text-decoration: none;
color: #bb5555;
transition: background .3s;
}
.sb-link:hover,
.sb-link:focus,
.sb-link:active {
background: #f7f7f7;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.