<div class="tabs-wrapper">
  <div class="tabs">
    <input type="radio" id="tab1" class="tabs__radio" name="tabs" value="1" checked autofocus="true">
    <input type="radio" id="tab2" class="tabs__radio" name="tabs" value="2">
    <input type="radio" id="tab3" class="tabs__radio" name="tabs" value="3">
    <input type="radio" id="tab4" class="tabs__radio" name="tabs" value="4">
    <input type="radio" id="tab5" class="tabs__radio" name="tabs" value="5">
    <input type="radio" id="tab6" class="tabs__radio" name="tabs" value="6" disabled>
    <input type="radio" id="tab7" class="tabs__radio" name="tabs" value="7">
    <input type="radio" id="tab8" class="tabs__radio" name="tabs" value="8">
    <input type="radio" id="tab9" class="tabs__radio" name="tabs" value="9">
    <input type="radio" id="tab10" class="tabs__radio" name="tabs" value="10">
    <div class="tabs__list" role="tablist" aria-owns="tablabel1 tablabel2 tablabel3 tablabel4 tablabel5 tablabel6 tablabel7 tablabel8 tablabel9 tablabel10" aria-activedescendant="tablabel1">
      <label for="tab1" id="tablabel1" class="tabs__label" role="tab" aria-label="Tab label 1" aria-posinset="1" aria-setsize="10" aria-selected="true" aria-expanded="true">Tab 1</label>
      <label for="tab2" id="tablabel2" class="tabs__label" role="tab" aria-label="Tab label 2" aria-posinset="2" aria-setsize="10" aria-selected="false" aria-expanded="false">Tab 2</label>
      <label for="tab3" id="tablabel3" class="tabs__label" role="tab" aria-label="Tab label 3" aria-posinset="3" aria-setsize="10" aria-selected="false" aria-expanded="false">Tab 3</label>
      <label for="tab4" id="tablabel4" class="tabs__label" role="tab" aria-label="Tab label 4" aria-posinset="4" aria-setsize="10" aria-selected="false" aria-expanded="false">Tab 4</label>
      <label for="tab5" id="tablabel5" class="tabs__label" role="tab" aria-label="Tab label 5" aria-posinset="5" aria-setsize="10" aria-selected="false" aria-expanded="false">Tab 5</label>
      <label for="tab6" id="tablabel6" class="tabs__label" role="tab" aria-label="Tab label 6" aria-posinset="6" aria-setsize="10" aria-selected="false" aria-expanded="false" aria-disabled="true">Tab 6</label>
      <label for="tab7" id="tablabel7" class="tabs__label" role="tab" aria-label="Tab label 7" aria-posinset="7" aria-setsize="10" aria-selected="false" aria-expanded="false">Tab 7</label>
      <label for="tab8" id="tablabel8" class="tabs__label" role="tab" aria-label="Tab label 8" aria-posinset="8" aria-setsize="10" aria-selected="false" aria-expanded="false">Tab 8</label>
      <label for="tab9" id="tablabel9" class="tabs__label" role="tab" aria-label="Tab label 9" aria-posinset="9" aria-setsize="10" aria-selected="false" aria-expanded="false">Tab 9</label>
      <label for="tab10" id="tablabel10" class="tabs__label" role="tab" aria-label="Tab label 10" aria-posinset="10" aria-setsize="10" aria-selected="false" aria-expanded="false">Tab 10</label>
    </div>
    <div class="tabs__container">
      <div class="tabs__content" role="tabpanel" aria-labelledby="tablabel1" aria-hidden="false">
        <p>Tab content 1</p>
      </div>
      <div class="tabs__content" role="tabpanel" aria-labelledby="tablabel2" aria-hidden="true">
        <p>Tab content 2</p>
      </div>
      <div class="tabs__content" role="tabpanel" aria-labelledby="tablabel3" aria-hidden="true">
        <p>Tab content 3</p>
      </div>
      <div class="tabs__content" role="tabpanel" aria-labelledby="tablabel4" aria-hidden="true">
        <p>Tab content 4</p>
      </div>
      <div class="tabs__content" role="tabpanel" aria-labelledby="tablabel5" aria-hidden="true">
        <p>Tab content 5</p>
      </div>
      <div class="tabs__content" role="tabpanel" aria-labelledby="tablabel6" aria-hidden="true">
        <p>Tab content 6</p>
      </div>
      <div class="tabs__content" role="tabpanel" aria-labelledby="tablabel7" aria-hidden="true">
        <p>Tab content 7</p>
      </div>
      <div class="tabs__content" role="tabpanel" aria-labelledby="tablabel8" aria-hidden="true">
        <p>Tab content 8</p>
      </div>
      <div class="tabs__content" role="tabpanel" aria-labelledby="tablabel9" aria-hidden="true">
        <p>Tab content 9</p>
      </div>
      <div class="tabs__content" role="tabpanel" aria-labelledby="tablabel10" aria-hidden="true">
        <p>Tab content 10</p>
      </div>
    </div>
  </div>
</div>
<a class="sb-link" href="//silvestarbistrovic.from.hr">silvestarbistrovic.from.hr</a>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tabs__radio {
  position: absolute;
  height: 1rem; }

.tabs__list {
  display: flex;
  flex-wrap: wrap; }

.tabs__label {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  border: 1px dotted transparent;
  background: #e5e5e5;
  color: #3e3e3e; }
  @media screen and (min-width: 600px) {
    .tabs__label {
      flex: 0 0 20%; } }
  @media screen and (min-width: 1000px) {
    .tabs__label {
      flex: 0 0 10%; } }

.tabs__content {
  padding: 0.5rem;
  display: none; }

.tabs__radio:nth-of-type(1) {
  left: 0.5rem;
  top: 0.75rem; }
  .tabs__radio:nth-of-type(1):checked ~ .tabs__list > .tabs__label:nth-of-type(1) {
    background-color: #fefefe; }
  .tabs__radio:nth-of-type(1):checked ~ .tabs__container > .tabs__content:nth-of-type(1) {
    display: block; }
  .tabs__radio:nth-of-type(1):focus ~ .tabs__list > .tabs__label:nth-of-type(1) {
    color: #1e1e1e;
    border-color: currentColor; }
  .tabs__radio:nth-of-type(1):disabled ~ .tabs__list > .tabs__label:nth-of-type(1):not(.tabs__label--hide) {
    color: #5e5e5e;
    cursor: no-drop; }
  .tabs__radio:nth-of-type(1):disabled ~ .hide-if-disabled:nth-of-type(1) {
    display: none; }
  @media screen and (min-width: 600px) {
    .tabs__radio:nth-of-type(1) {
      left: 0.5rem;
      top: 0.75rem; } }
  @media screen and (min-width: 1000px) {
    .tabs__radio:nth-of-type(1) {
      top: 0.75rem;
      left: calc(10% * (1 - 1) + 0.5rem); } }

.tabs__radio:nth-of-type(2) {
  left: calc(50% + 0.5rem);
  top: 0.75rem; }
  .tabs__radio:nth-of-type(2):checked ~ .tabs__list > .tabs__label:nth-of-type(2) {
    background-color: #fefefe; }
  .tabs__radio:nth-of-type(2):checked ~ .tabs__container > .tabs__content:nth-of-type(2) {
    display: block; }
  .tabs__radio:nth-of-type(2):focus ~ .tabs__list > .tabs__label:nth-of-type(2) {
    color: #1e1e1e;
    border-color: currentColor; }
  .tabs__radio:nth-of-type(2):disabled ~ .tabs__list > .tabs__label:nth-of-type(2):not(.tabs__label--hide) {
    color: #5e5e5e;
    cursor: no-drop; }
  .tabs__radio:nth-of-type(2):disabled ~ .hide-if-disabled:nth-of-type(2) {
    display: none; }
  @media screen and (min-width: 600px) {
    .tabs__radio:nth-of-type(2) {
      left: 0.5rem;
      top: 0.75rem;
      left: calc(20% + 0.5rem); } }
  @media screen and (min-width: 1000px) {
    .tabs__radio:nth-of-type(2) {
      top: 0.75rem;
      left: calc(10% * (2 - 1) + 0.5rem); } }

.tabs__radio:nth-of-type(3) {
  left: 0.5rem;
  top: 3.25rem; }
  .tabs__radio:nth-of-type(3):checked ~ .tabs__list > .tabs__label:nth-of-type(3) {
    background-color: #fefefe; }
  .tabs__radio:nth-of-type(3):checked ~ .tabs__container > .tabs__content:nth-of-type(3) {
    display: block; }
  .tabs__radio:nth-of-type(3):focus ~ .tabs__list > .tabs__label:nth-of-type(3) {
    color: #1e1e1e;
    border-color: currentColor; }
  .tabs__radio:nth-of-type(3):disabled ~ .tabs__list > .tabs__label:nth-of-type(3):not(.tabs__label--hide) {
    color: #5e5e5e;
    cursor: no-drop; }
  .tabs__radio:nth-of-type(3):disabled ~ .hide-if-disabled:nth-of-type(3) {
    display: none; }
  @media screen and (min-width: 600px) {
    .tabs__radio:nth-of-type(3) {
      left: 0.5rem;
      top: 0.75rem;
      left: calc(40% + 0.5rem); } }
  @media screen and (min-width: 1000px) {
    .tabs__radio:nth-of-type(3) {
      top: 0.75rem;
      left: calc(10% * (3 - 1) + 0.5rem); } }

.tabs__radio:nth-of-type(4) {
  left: calc(50% + 0.5rem);
  top: 3.25rem; }
  .tabs__radio:nth-of-type(4):checked ~ .tabs__list > .tabs__label:nth-of-type(4) {
    background-color: #fefefe; }
  .tabs__radio:nth-of-type(4):checked ~ .tabs__container > .tabs__content:nth-of-type(4) {
    display: block; }
  .tabs__radio:nth-of-type(4):focus ~ .tabs__list > .tabs__label:nth-of-type(4) {
    color: #1e1e1e;
    border-color: currentColor; }
  .tabs__radio:nth-of-type(4):disabled ~ .tabs__list > .tabs__label:nth-of-type(4):not(.tabs__label--hide) {
    color: #5e5e5e;
    cursor: no-drop; }
  .tabs__radio:nth-of-type(4):disabled ~ .hide-if-disabled:nth-of-type(4) {
    display: none; }
  @media screen and (min-width: 600px) {
    .tabs__radio:nth-of-type(4) {
      left: 0.5rem;
      top: 0.75rem;
      left: calc(60% + 0.5rem); } }
  @media screen and (min-width: 1000px) {
    .tabs__radio:nth-of-type(4) {
      top: 0.75rem;
      left: calc(10% * (4 - 1) + 0.5rem); } }

.tabs__radio:nth-of-type(5) {
  left: 0.5rem;
  top: 3.25rem;
  top: 5.75rem; }
  .tabs__radio:nth-of-type(5):checked ~ .tabs__list > .tabs__label:nth-of-type(5) {
    background-color: #fefefe; }
  .tabs__radio:nth-of-type(5):checked ~ .tabs__container > .tabs__content:nth-of-type(5) {
    display: block; }
  .tabs__radio:nth-of-type(5):focus ~ .tabs__list > .tabs__label:nth-of-type(5) {
    color: #1e1e1e;
    border-color: currentColor; }
  .tabs__radio:nth-of-type(5):disabled ~ .tabs__list > .tabs__label:nth-of-type(5):not(.tabs__label--hide) {
    color: #5e5e5e;
    cursor: no-drop; }
  .tabs__radio:nth-of-type(5):disabled ~ .hide-if-disabled:nth-of-type(5) {
    display: none; }
  @media screen and (min-width: 600px) {
    .tabs__radio:nth-of-type(5) {
      left: 0.5rem;
      top: 0.75rem;
      left: calc(80% + 0.5rem); } }
  @media screen and (min-width: 1000px) {
    .tabs__radio:nth-of-type(5) {
      top: 0.75rem;
      left: calc(10% * (5 - 1) + 0.5rem); } }

.tabs__radio:nth-of-type(6) {
  left: calc(50% + 0.5rem);
  top: 3.25rem;
  top: 5.75rem; }
  .tabs__radio:nth-of-type(6):checked ~ .tabs__list > .tabs__label:nth-of-type(6) {
    background-color: #fefefe; }
  .tabs__radio:nth-of-type(6):checked ~ .tabs__container > .tabs__content:nth-of-type(6) {
    display: block; }
  .tabs__radio:nth-of-type(6):focus ~ .tabs__list > .tabs__label:nth-of-type(6) {
    color: #1e1e1e;
    border-color: currentColor; }
  .tabs__radio:nth-of-type(6):disabled ~ .tabs__list > .tabs__label:nth-of-type(6):not(.tabs__label--hide) {
    color: #5e5e5e;
    cursor: no-drop; }
  .tabs__radio:nth-of-type(6):disabled ~ .hide-if-disabled:nth-of-type(6) {
    display: none; }
  @media screen and (min-width: 600px) {
    .tabs__radio:nth-of-type(6) {
      left: 0.5rem;
      top: 3.25rem; } }
  @media screen and (min-width: 1000px) {
    .tabs__radio:nth-of-type(6) {
      top: 0.75rem;
      left: calc(10% * (6 - 1) + 0.5rem); } }

.tabs__radio:nth-of-type(7) {
  left: 0.5rem;
  top: 3.25rem;
  top: 5.75rem;
  top: 8.25rem; }
  .tabs__radio:nth-of-type(7):checked ~ .tabs__list > .tabs__label:nth-of-type(7) {
    background-color: #fefefe; }
  .tabs__radio:nth-of-type(7):checked ~ .tabs__container > .tabs__content:nth-of-type(7) {
    display: block; }
  .tabs__radio:nth-of-type(7):focus ~ .tabs__list > .tabs__label:nth-of-type(7) {
    color: #1e1e1e;
    border-color: currentColor; }
  .tabs__radio:nth-of-type(7):disabled ~ .tabs__list > .tabs__label:nth-of-type(7):not(.tabs__label--hide) {
    color: #5e5e5e;
    cursor: no-drop; }
  .tabs__radio:nth-of-type(7):disabled ~ .hide-if-disabled:nth-of-type(7) {
    display: none; }
  @media screen and (min-width: 600px) {
    .tabs__radio:nth-of-type(7) {
      left: 0.5rem;
      top: 3.25rem;
      left: calc(20% + 0.5rem); } }
  @media screen and (min-width: 1000px) {
    .tabs__radio:nth-of-type(7) {
      top: 0.75rem;
      left: calc(10% * (7 - 1) + 0.5rem); } }

.tabs__radio:nth-of-type(8) {
  left: calc(50% + 0.5rem);
  top: 3.25rem;
  top: 5.75rem;
  top: 8.25rem; }
  .tabs__radio:nth-of-type(8):checked ~ .tabs__list > .tabs__label:nth-of-type(8) {
    background-color: #fefefe; }
  .tabs__radio:nth-of-type(8):checked ~ .tabs__container > .tabs__content:nth-of-type(8) {
    display: block; }
  .tabs__radio:nth-of-type(8):focus ~ .tabs__list > .tabs__label:nth-of-type(8) {
    color: #1e1e1e;
    border-color: currentColor; }
  .tabs__radio:nth-of-type(8):disabled ~ .tabs__list > .tabs__label:nth-of-type(8):not(.tabs__label--hide) {
    color: #5e5e5e;
    cursor: no-drop; }
  .tabs__radio:nth-of-type(8):disabled ~ .hide-if-disabled:nth-of-type(8) {
    display: none; }
  @media screen and (min-width: 600px) {
    .tabs__radio:nth-of-type(8) {
      left: 0.5rem;
      top: 3.25rem;
      left: calc(40% + 0.5rem); } }
  @media screen and (min-width: 1000px) {
    .tabs__radio:nth-of-type(8) {
      top: 0.75rem;
      left: calc(10% * (8 - 1) + 0.5rem); } }

.tabs__radio:nth-of-type(9) {
  left: 0.5rem;
  top: 3.25rem;
  top: 5.75rem;
  top: 8.25rem;
  top: 10.75rem; }
  .tabs__radio:nth-of-type(9):checked ~ .tabs__list > .tabs__label:nth-of-type(9) {
    background-color: #fefefe; }
  .tabs__radio:nth-of-type(9):checked ~ .tabs__container > .tabs__content:nth-of-type(9) {
    display: block; }
  .tabs__radio:nth-of-type(9):focus ~ .tabs__list > .tabs__label:nth-of-type(9) {
    color: #1e1e1e;
    border-color: currentColor; }
  .tabs__radio:nth-of-type(9):disabled ~ .tabs__list > .tabs__label:nth-of-type(9):not(.tabs__label--hide) {
    color: #5e5e5e;
    cursor: no-drop; }
  .tabs__radio:nth-of-type(9):disabled ~ .hide-if-disabled:nth-of-type(9) {
    display: none; }
  @media screen and (min-width: 600px) {
    .tabs__radio:nth-of-type(9) {
      left: 0.5rem;
      top: 3.25rem;
      left: calc(60% + 0.5rem); } }
  @media screen and (min-width: 1000px) {
    .tabs__radio:nth-of-type(9) {
      top: 0.75rem;
      left: calc(10% * (9 - 1) + 0.5rem); } }

.tabs__radio:nth-of-type(10) {
  left: calc(50% + 0.5rem);
  top: 3.25rem;
  top: 5.75rem;
  top: 8.25rem;
  top: 10.75rem; }
  .tabs__radio:nth-of-type(10):checked ~ .tabs__list > .tabs__label:nth-of-type(10) {
    background-color: #fefefe; }
  .tabs__radio:nth-of-type(10):checked ~ .tabs__container > .tabs__content:nth-of-type(10) {
    display: block; }
  .tabs__radio:nth-of-type(10):focus ~ .tabs__list > .tabs__label:nth-of-type(10) {
    color: #1e1e1e;
    border-color: currentColor; }
  .tabs__radio:nth-of-type(10):disabled ~ .tabs__list > .tabs__label:nth-of-type(10):not(.tabs__label--hide) {
    color: #5e5e5e;
    cursor: no-drop; }
  .tabs__radio:nth-of-type(10):disabled ~ .hide-if-disabled:nth-of-type(10) {
    display: none; }
  @media screen and (min-width: 600px) {
    .tabs__radio:nth-of-type(10) {
      left: 0.5rem;
      top: 3.25rem;
      left: calc(80% + 0.5rem); } }
  @media screen and (min-width: 1000px) {
    .tabs__radio:nth-of-type(10) {
      top: 0.75rem;
      left: calc(10% * (10 - 1) + 0.5rem); } }

.tabs-wrapper {
  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;
}

var hideAll = function() {
  var contentElements = document.querySelectorAll('.tabs__content');

  for (var i = 0; i < contentElements.length; i++) {
    contentElements[i].setAttribute('aria-hidden', true);
  }
};

var resetTabindexAll = function() {
  var contentElements = document.querySelectorAll('.tabs__content');

  for (var i = 0; i < contentElements.length; i++) {
    contentElements[i].setAttribute('tabindex', -1);
  }
};

var unselectAll = function() {
  var contentLabels = document.querySelectorAll('.tabs__label');

  for (var i = 0; i < contentLabels.length; i++) {
    contentLabels[i].setAttribute('aria-selected', false);
    contentLabels[i].setAttribute('aria-expanded', false);
  }
};

var TwitchSwitchRadio = function(e) {
  hideAll();
  unselectAll();

  var labelId = 'tablabel' + this.value;
  var panel = document.querySelector('[role="tablist"]');
  var label = document.querySelector('#' + labelId);
  var content = document.querySelector('[aria-labelledby="' + label.id + '"]');
  panel.setAttribute('aria-activedescendant', labelId);
  content.setAttribute('aria-hidden', false);
  label.setAttribute('aria-selected', true);
  label.setAttribute('aria-expanded', true);
};

var TwitchSwitchLabel = function(e) {
  if(e.keyCode === 13) {
    resetTabindexAll();

    var labelId = 'tablabel' + this.value;
    var label = document.querySelector('#' + labelId);
    var content = document.querySelector('[aria-labelledby="' + label.id + '"]');
    content.setAttribute('tabindex', 0);
    content.focus();
  }
};

var radios = document.querySelectorAll('.tabs__radio');

for (var i = 0; i < radios.length; i++) {
  radios[i].addEventListener('change', TwitchSwitchRadio);
}

for (var i = 0; i < radios.length; i++) {
  radios[i].addEventListener('keypress', TwitchSwitchLabel);
}