Tabs component

<div class="tabs">
  <input type="radio" class="tabs__radio" name="tabs-example" id="tab1" checked>
  <label for="tab1" class="tabs__label">Tab 1</label>
  <div class="tabs__content">Content for Tab 1</div>
  <input type="radio" class="tabs__radio" name="tabs-example" id="tab2" >
  <label for="tab2" class="tabs__label">Tab 2</label>
  <div class="tabs__content">Content for Tab 2</div>
  <input type="radio" class="tabs__radio" name="tabs-example" id="tab3" >
  <label for="tab3" class="tabs__label">Tab 3</label>
  <div class="tabs__content">Content for Tab 3</div>
</div>

.tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;
  font-family: sans-serif;
}

.tabs__radio {
  display: none;
}

.tabs__label {
  padding: 10px 16px;
  cursor: pointer;
  background-color: #f1f5f9;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-right: 4px;
  font-weight: 500;
  transition: all 0.2s;
}

.tabs__content {
  order: 1;
  width: 100%;
  border-bottom: 3px solid #3b82f6;
  line-height: 1.5;
  padding: 20px;
  display: none;
  background-color: #fff;
}

.tabs__radio:checked + .tabs__label {
  background-color: #3b82f6;
  color: #fff;
}

.tabs__radio:checked + .tabs__label + .tabs__content {
  display: block;
}