Build a Tabs component that displays one panel of content at a time depending on the active tab element. Some HTML is provided for you as example contents.
Requirements
- Clicking on a tab makes it the active tab. Add a visual indication (e.g. using blue text color) for the active tab to differentiate it from the non-active tabs.
- At all times, only one panel's contents should be displayed — the one corresponding to the active tab's.
Notes
- The focus of this question is on functionality, not the styling. There's no need to write any custom CSS except for highlighting the active tab.
- You may modify the markup (e.g. adding
ids, data attributes, replacing some tags, etc) and use client-side rendering instead.
- You may want to think about ways to improve the user experience of the application and implement them (you get bonus credit for doing that during interviews).