How to build a UI Card with Tabs? | Frontend Coding Challenge | JavaScript Interview Question | React
@Yomesh Gupta

ReactHTML/CSS/JavaScriptAll Levels
Do you see value in our efforts?

Devtools Tech is a free platform for Frontend Engineers. It takes a lot of time, effort, and finanical resources to keep the platform running. If you see any value in our work and would like to support us then you can do using the following options.


In this question, you need to create a custom Card component that contains a CardHeader and CardBody. Your final component should have the same behavior as show in the following demo video:

The following could be one way to describe the APIs.

CardHeader.propTypes = {
  // card heading
  heading: PropTypes.string.isRequired,
  // optional right aligned card action ctas
  actions: PropTypes.arrayOf(
      label: PropTypes.string.isRequired,
      tooltip: PropTypes.string,
      onClick: PropTypes.func,

CardBody.propTypes = {
  tabs: PropTypes.shape({
    // index of the current active tab
    activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    // the initial active index
    defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    // tabs with content
    panes: PropTypes.arrayOf(
        label: PropTypes.string.isRequired,
        pane: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),

Feel free to design the Component APIs in whatever manner you like as along as the final output is reusable and same as the demo video.


Start the timer and try to finish as soon as possible. You can record your solving process or take a screenshot of your final code and share it on Twitter/LinkedIn and tag @devtoolstech @yomeshgupta.