Vertical Sliding Tabs

dabblet.css

/* Vertical Sliding Tabs */
* 
{
box-sizing: border-box;
}

body {
  overflow: auto;
  background: #000;
    width: 100%; height: 800px; border: 5px solid white;
}
.container {
  position: relative;
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 750px;
  margin: -375px -600px;
  counter-reset: tab-counter ;
}
 .container input[type=radio] {
  display: none;
}

body .container input[type=radio] + label {
  position: absolute;
  height: 100%;
  box-shadow: 5x 3px 4px 2px #000;
  cursor: pointer;
  -webit-transition: width 1.2s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: width 1.2s cubic-bezier(0.11, 0.65, 0.04, 1);
}
body .container input[type=radio] + label {
  box-shadow: 5x 3px -4px -2px #000;
  }body .container input[type=radio] + label .content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  margin-left: -300px;
  counter-increment: tab-counter -1;
  text-align: center;
}
body .container input[type=radio] + label .content:after {
  content: counter(tab-counter);
  
} .container input[type=radio]:checked + label ~ label:nth-child(2) {
  width: 87px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(2) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}
  body .container input[type=radio] + label:nth-child(2) {
  width: 1200px;
  background: #888888;
}
body .container input[type=radio]:checked + label ~ label:nth-child(4) {
  width: 77px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(4) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}

body .container input[type=radio] + label:nth-child(4) {
  width: 1190px;
  background: #5600b3;
}
body .container input[type=radio] + label:nth-child(4):after {
  position: absolute;
  content: "";
  top: 77.7777777778%;
  left: 100%;
  width: 30px;
  height: 83.3333333333px;
  border-radius: 1px 16.6666666667px 16.6666666667px 0;
  background: #5600b3;
  box-shadow: 5px 0px 9px -3px #000;
  text-transform: rotate(-90deg);
}
body .container input[type=radio]:checked + label ~ label:nth-child(6) {
  width: 67px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(6) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}
body .container input[type=radio] + label:nth-child(6) {
  width: 1180px;
  background: #2500ff;
}
body .container input[type=radio] + label:nth-child(6):after {
  position: absolute;
  content: "";
  top: 66.6666666667%;
  left: 100%;
  width: 30px;
  height: 83.3333333333px;
  border-radius: 1px 16.6666666667px 16.6666666667px 0;
  background: #2500ff;
  box-shadow: 5px 0px 9px -3px #000;
  text-transform: rotate(-90deg);
}
body .container input[type=radio]:checked + label ~ label:nth-child(8) {
  width: 57px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(8) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}
body .container input[type=radio] + label:nth-child(8) {
  width: 1170px;
  background: #64B5F6;
}
body .container input[type=radio] + label:nth-child(8):after {
  position: absolute;
  content: "";
  top: 55.5555555556%;
  left: 100%;
  width: 30px;
  height: 83.3333333333px;
  border-radius: 1px 16.6666666667px 16.6666666667px 0;
  background: #64B5F6;
  box-shadow: 5px 0px 9px -3px #000;
  text-transform: rotate(-90deg);
}
body .container input[type=radio]:checked + label ~ label:nth-child(10) {
  width: 47px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(10) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}

body .container input[type=radio] + label:nth-child(10) {
  width: 1160px;
  background: #22a898;
}
body .container input[type=radio] + label:nth-child(10):after {
  position: absolute;
  content: "";
  top: 44.4444444444%;
  left: 100%;
  width: 30px;
  height: 83.3333333333px;
  border-radius: 1px 16.6666666667px 16.6666666667px 0;
  background: #22a898;
  box-shadow: 5px 0px 9px -3px #000;
  text-transform: rotate(-90deg);
}
body .container input[type=radio]:checked + label ~ label:nth-child(12) {
  width: 37px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(12) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}

body .container input[type=radio] + label:nth-child(12) {
  width: 1150px;
  background: #32a822;
}
body .container input[type=radio] + label:nth-child(12):after {
  position: absolute;
  content: "";
  top: 33.3333333333%;
  left: 100%;
  width: 30px;
  height: 83.3333333333px;
  border-radius: 1px 16.6666666667px 16.6666666667px 0;
  background: #32a822;
  box-shadow: 5px 0px 9px -3px #000;
  text-transform: rotate(-90deg);
}
body .container input[type=radio]:checked + label ~ label:nth-child(14) {
  width: 27px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(14) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}

body .container input[type=radio] + label:nth-child(14) {
  width: 1140px;
  background: #81C784;
}
body .container input[type=radio] + label:nth-child(14):after {
  position: absolute;
  content: "";
  top: 22.2222222222%;
  left: 100%;
  width: 30px;
  height: 83.3333333333px;
  border-radius: 1px 16.6666666667px 16.6666666667px 0;
  background: #81C784;
  box-shadow: 5px 0px 9px -3px #000;
  text-transform: rotate(-90deg);
}
body .container input[type=radio]:checked + label ~ label:nth-child(16) {
  width: 17px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(16) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}
body .container input[type=radio] + label:nth-child(16) {
  width: 1130px;
  background: #ffa500;
}
body .container input[type=radio] + label:nth-child(16):after {
  position: absolute;
  content: "";
  top: 11.1111111111%;
  left: 100%;
  width: 30px;
  height: 83.3333333333px;
  border-radius: 1px 16.6666666667px 16.6666666667px 0;
  background: #ffa500;
  box-shadow: 5px 0px 9px -3px #000;
  text-transform: rotate(-90deg);
}
body .container input[type=radio]:checked + label ~ label:nth-child(18) {
  width: 7px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(18) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}
body .container input[type=radio] + label:nth-child(18) {
  width: 1120px;
  background: #a82232;
}
body .container input[type=radio] + label:nth-child(18):after {
  position: absolute;
  content: "";
  top: 0%;
  left: 100%;
  width: 30px;
  height: 83.3333333333px;
  border-radius: 1px 16.6666666667px 16.6666666667px 0;
  background: #a82232;
  box-shadow: 5px 0px 9px -3px #000;
  text-transform: rotate(-90deg);
}

dabblet.html

<body>
<div class="container">
  <input type="radio" name="tabs" id="tab_8"/>
  <label for="tab_8"> 
    <div class="content">Hello, I'm #</div>
  </label>
  <input type="radio" name="tabs" id="tab_7"/>
  <label for="tab_7"> 
    <div class="content">Hello, I'm #</div>
  </label>
  <input type="radio" name="tabs" id="tab_6"/>
  <label for="tab_6"> 
    <div class="content">Hello, I'm #</div>
  </label>
  <input type="radio" name="tabs" id="tab_5"/>
  <label for="tab_5"> 
    <div class="content">Hello, I'm #</div>
  </label>
  <input type="radio" name="tabs" id="tab_4"/>
  <label for="tab_4"> 
    <div class="content">Hello, I'm #</div>
  </label>
  <input type="radio" name="tabs" id="tab_3"/>
  <label for="tab_3">
    <div class="content">Hello, I'm #</div>
  </label>
  <input type="radio" name="tabs" id="tab_2"/>
  <label for="tab_2"> 
    <div class="content">Hello, I'm #</div>
  </label>
  <input type="radio" name="tabs" id="tab_1"/>
  <label for="tab_1"> 
    <div class="content">Hello, I'm #</div>
  </label>
  <input type="radio" name="tabs" id="tab_0">
  <label for="tab_0"> 
    <div class="content">Hello, I'm #</div>
  </label>
</div>
</body>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"","page":"all"}