tabs in html and css only code example

Example 1: tabs css only

.label {
  width: 100%;
  padding: 20px 30px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #7f7f7f;
  transition: background 0.1s, color 0.1s;
}

.label:hover {
  background: #d8d8d8;
}

.label:active {
  background: #ccc;
}

.input:focus + .label {
  box-shadow: inset 0px 0px 0px 3px #2aa1c0;
  z-index: 1;
}

.input:checked + .label {
  background: #fff;
  color: #000;
}

@media (min-width: 600px) {
  .label {
    width: auto;
  }
}

Example 2: tabs css only

input { display: none; }                /* hide radio buttons */input + label { display: inline-block } /* show labels in line */input ~ .tab { display: none }          /* hide contents *//* show contents only for selected tab */#tab1:checked ~ .tab.content1,#tab2:checked ~ .tab.content2,#tab3:checked ~ .tab.content3,#tab4:checked ~ .tab.content4,#tab5:checked ~ .tab.content5 { display: block; }