About CSS-only Tabs

Here's how you can implement dynamic tabs without the use of JavaScript:

HTML

<div class="tabbed">
    <input type="radio" id="tab1" name="css-tabs" checked>
    <input type="radio" id="tab2" name="css-tabs">
    <input type="radio" id="tab3" name="css-tabs">

    <ul class="tabs">
        <li class="tab"><label for="tab1">Python</label></li>
        <li class="tab"><label for="tab2">Django</label></li>
        <li class="tab"><label for="tab3">JavaScript</label></li>
    </ul>

    <div class="tab-content">
        <p>Something about Python</p>
    </div>

    <div class="tab-content">
        <p>Something about Django</p>
    </div>

    <div class="tab-content">
        <p>Something about JavaScript</p>
    </div>
</div>

CSS

.tabbed {
  overflow-x: hidden;
}

.tabbed [type="radio"] {
  display: none;
}

.tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
}
.tab > label {
  display: block;
  cursor: pointer;
}

.tab-content {
  display: none;
}

.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label {
  background: var(--primary);
  color: var(--white);
}

.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3) {
  display: block;
}