Tab highlight is too high

[Tamriel]

When zoomed in a bit, with Google Chrome, a highlighted tab looks like this for me:

There is a small gap between the violet hightlight and the light grey bar.
Setting padding-bottom: 0px; of the a element fixes it, but then the padding of the text is too low:

[Odonno]

I don't think there is a perfect solution for your problem. The grey border is on the entire Tab component, not on each TabItem so you can't get rid of the grey border.

Another way would be to remove the grey border completely which I did for a recent project. Simply do this and you will still have a pretty UI component:

.tab {
  border-bottom: none;
}