<!-- 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>
<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:active {
  background: #f7f7f7;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.