Problem description

You are given a horizontal navigation component that uses a set of buttons with the class .tab (such as "Home", "About", and "Contact") grouped inside a container with the class .tab-list.

Write CSS to meet the following requirements:

• Tabs should look like horizontal navigation buttons with subtle separation between them.

• When a .tab receives :focus (e.g., with “Tab’’ or arrow keys), it should display a bold blue bottom border (4px solid #2684FF).

• The bottom border must only appear for the focused .tab.

• The default browser outline should not appear; only your custom border-bottom should show.

Goal

Provide an accessible tab interface with a custom, visible focus highlight, making keyboard navigation clear and user-friendly.

Constraints

Do not use JavaScript or change HTML structure.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.