设计主页选项卡的CSS元素

<div class="tab-container">
  <div class="tab">
    <input type="radio" name="tab" id="tab1" checked>
    <label for="tab1">Tab 1</label>
    <div class="tab-content">
      Content for Tab 1
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tab" id="tab2">
    <label for="tab2">Tab 2</label>
    <div class="tab-content">
      Content for Tab 2
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tab" id="tab3">
    <label for="tab3">Tab 3</label>
    <div class="tab-content">
      Content for Tab 3
    </div>
  </div>
</div>

.tab-container {
  display: flex;
}

.tab {
  flex: 1;
  text-align: center;
}

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

.tab label {
  display: block;
  padding: 10px;
  background-color: #f2f2f2;
  cursor: pointer;
}

.tab input[type="radio"]:checked + label {
  background-color: #ccc;
}

.tab-content {
  display: none;
  padding: 10px;
}

.tab input[type="radio"]:checked + label + .tab-content {
  display: block;
}