chakra-ui-tabs.js

...
const tabs = [
  'Account',
  'Profile',
  'Payment',
  'Notification',
  'Advanced'
]

...
<>
      <Page title={`Settings for ${username}`}>
        <Box mt="30px">

          <Flex
            align="center"
            pb={8}
          >
            <Container>
              <Flex
                justifyContent="space-between"
              >
                <Text
                  as="span"
                  fontWeight="bold"
                  fontSize="20px"
                >
                  Settings
                </Text>
              </Flex>
              <Tabs
                minH="52px"
                overflow="hidden"
              >
                <TabList
                  borderBottom="2px solid rgba(50,56,66,.1)"
                  w="99vh"
                  h="58px"
                >
                  {
                    tabs.map((tab, index) => (
                      <Tab
                        key={index}
                        outline="none"
                        fontWeight="bold"
                        overflow="hidden"
                      >
                        {tab}
                      </Tab>
                    ))
                  }
                  <Tab>Notification</Tab>
                </TabList>
              </Tabs>
            </Container>
          </Flex>
        </Box>
      </Page>
    </>