.tabs { 
    max-width:100%;
font-family: Arial, sans-serif;
    margin-top: 60px;
}

/* hide native radios */
.tabs input[type="radio"] { display: none; }

/* labels look like tabs */
.tab-label {
  display: inline-block;
  padding: 8px 18px;
  margin-right: 6px;
  border-radius: 20px;
  background: #f1f1f1;
  cursor: pointer;
  font-weight: 600;
}

/* active tab style when its radio is checked */
#tab-men:checked + .tab-label[for="tab-men"],
#tab-women:checked + .tab-label[for="tab-women"] {
  background: #ffd54f; /* yellow like your image */
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* panels: hide all by default */
.tab-panels .panel { display: none; padding: 18px 0; }

/* show correct panel when radio checked */
/* note: inputs must be before .tab-panels in DOM so ~ works */
#tab-men:checked ~ .tab-panels .men-panel { display: block; }
#tab-women:checked ~ .tab-panels .women-panel { display: block; }

/* small responsive styles */
.panel h2 { margin: 0 0 6px; font-size: 24px; color:#0b2740; }
.panel p { margin: 0; color:#333; }