<div class="tabs-wrapper">
  <!-- 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" disabled>
    <input class="tabs__radio" id="myTab3" type="radio" name="myTabs" value="3">
    <input class="tabs__radio" id="myTab4" type="radio" name="myTabs" value="4">
    <input class="tabs__radio" id="myTab5" type="radio" name="myTabs" value="5">
    <input class="tabs__radio" id="myTab6" type="radio" name="myTabs" value="6">
    <input class="tabs__radio" id="myTab7" type="radio" name="myTabs" value="7">
    <input class="tabs__radio" id="myTab8" type="radio" name="myTabs" value="8">
    <input class="tabs__radio" id="myTab9" type="radio" name="myTabs" value="9">
    <input class="tabs__radio" id="myTab10" type="radio" name="myTabs" value="10" disabled>

    <!-- labels will be display as actual tabs -->
    <label class="tabs__label hide-if-disabled" for="myTab1">Tab 1</label>
    <label class="tabs__label hide-if-disabled" for="myTab2">Tab 2</label>
    <label class="tabs__label hide-if-disabled" for="myTab3">Tab 3</label>
    <label class="tabs__label hide-if-disabled" for="myTab4">Tab 4</label>
    <label class="tabs__label hide-if-disabled" for="myTab5">Tab 5</label>
    <label class="tabs__label hide-if-disabled" for="myTab6">Tab 6</label>
    <label class="tabs__label hide-if-disabled" for="myTab7">Tab 7</label>
    <label class="tabs__label hide-if-disabled" for="myTab8">Tab 8</label>
    <label class="tabs__label hide-if-disabled" for="myTab9">Tab 9</label>
    <label class="tabs__label hide-if-disabled" for="myTab10">Tab 10</label>

    <!-- wrappers for tab's content -->
    <div class="tabs__content hide-if-disabled">1. tab content...</div>
    <div class="tabs__content hide-if-disabled">2. tab content...</div>
    <div class="tabs__content hide-if-disabled">3. tab content...</div>
    <div class="tabs__content hide-if-disabled">4. tab content...</div>
    <div class="tabs__content hide-if-disabled">5. tab content...</div>
    <div class="tabs__content hide-if-disabled">6. tab content...</div>
    <div class="tabs__content hide-if-disabled">7. tab content...</div>
    <div class="tabs__content hide-if-disabled">8. tab content...</div>
    <div class="tabs__content hide-if-disabled">9. tab content...</div>
    <div class="tabs__content hide-if-disabled">10. tab content...</div>
<a class="sb-link" href="//silvestarbistrovic.from.hr">silvestarbistrovic.from.hr</a>
// import cita-flex mixins
// @import './bower_components/cita-flex/css/src/_cita-flex-mixins.scss';

// reset
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

//default variables 
$size: .5rem;
$background: #e5e5e5;
$background--active: #fefefe;
$color: #4e4e4e;
$color--disabled: #8e8e8e;
$breakpoint: 600px;

.tabs {
    @include flex;
    @include wrap(wrap);

.tabs__radio {
    position: absolute;
    left: -9999px;

.tabs__label {
    @include flexbox(1 0 auto);
    @include flex-basis(2);
    @include flex;
    @include justify(center);
    padding: $size;
    color: $color;
    background-color: $background;
    cursor: pointer;

.tabs__content {
    @include flex-basis(1);
    padding: $size;
    display: none;

@for $i from 1 through 10 {
    .tabs__radio:nth-of-type(#{$i}):checked {
        & ~ .tabs__label:nth-of-type(#{$i}) {
            background-color: $background--active;
        & ~ .tabs__content:nth-of-type(#{$i}) {
            display: block;
    .tabs__radio:nth-of-type(#{$i}):disabled {
        & ~ .tabs__label:nth-of-type(#{$i}):not(.tabs__label--hide) {
            color: $color--disabled;
            cursor: no-drop;
        & ~ .hide-if-disabled:nth-of-type(#{$i}) {
            display: none;

@media screen and (min-width: $breakpoint) {
    .tabs__label {
        @include flex-basis(11);

.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:active {
  background: #f7f7f7;
View Compiled

External CSS

  1. https://raw.githubusercontent.com/maliMirkec/cita-flex/master/css/src/_cita-flex-mixins.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.