Tabs component

[sandrely2611-zz]

Description

Based on the Ctrl project needs, we detect some inconsistencies in the tabs component.
Our goal with this ticket is to fix how this component looks, remove the unnecessary code from Ctrl.
And be able to consume the component from the DS without adding extra css or js to make it work in Ctrl.

Narrative

Design System: https://www.figma.com/file/c1SBfQGUU3twlW3YjeL8Sx/michelada_DS?node-id=0%3A1
Control project: https://www.figma.com/file/TmTjBO1Ua93cm6B978ErDw/ControlMocks_21-0ct-2020?node-id=3456%3A0

Video explanation
https://michelada.slack.com/archives/C0279KDU485/p1643668727799009?thread_ts=1643666990.610879&cid=C0279KDU485

Related issues from Gitlab Ctrl project

https://git.michelada.io/products/ctrl/-/issues/375
https://git.michelada.io/products/ctrl/-/issues/273

Definition of done

1. Code review approved
2. Remove CSS/JS/HTML code related to the component from Ctrl
3. Deployed to production
4. Deployed to NPM library

Acceptance criteria

1. Support mobile, tablet and desktop breakpoints.
2. In mobile and tablet versions the behavior is the same.
   • full-width
3. Fix clickable area
4. Update palette color when the status are: hover, active, selected and focus.

[sandrely2611-zz]

Issue # 1 en Ctrl

Current result:
Only the text of the tab has the link to redirect to the correct tab.

Evidence
https://user-images.githubusercontent.com/9082790/154122930-53f02be6-1a07-4aa4-8629-f022b6056cb8.mov

Expect result
In My profile and Team Directory views, "Personal" and "Professional" buttons should be clickable anywhere in the button, not only in the text.