div[role="tablist"] {
  display: flex;
}

button[role="tab"] {
  flex-grow: 1;
  padding: 5px;
  list-style: none;
  background: #f3f3f3;
  border: solid 1px #c9c9c9;
  text-align: center;
  cursor: pointer;
  width: 25%;
  padding: 16px 0;
}

button[role="tab"][aria-selected="true"] {
  background: #fff;
  color: #cf142b;
  transition: all 0.2s ease-out;
  border-bottom: solid 1px #fff;
}

button[role="tab"][aria-selected="false"]:hover {
  text-decoration: underline;
  cursor: pointer;
}

div[role="tabpanel"] {
  border: solid 1px #c9c9c9;
  border-top: none;
  padding: 32px;
}

div:focus-visible[role="tabpanel"] {
  outline: -webkit-focus-ring-color auto 1px !important;
}