export default function Example() {
  const StyledContent = styled(Tabs.Content, {
    minHeight: "50px",
    paddingTop: "20px",
    color: theme.colors.primary,
  });

  return (
    <>
      <Box
        css={{
          display: "flex",
          width: 500,
          rowGap: "$100",
          flexDirection: "column",
        }}
      >
        <Tabs.Root defaultValue="tab1" align="center">
          <Tabs.List aria-label="Countries' information">
            <Tabs.Trigger value="tab1"> France </Tabs.Trigger>
            <Tabs.Trigger value="tab2">Kenya</Tabs.Trigger>
            <Tabs.Trigger value="tab3">Austria</Tabs.Trigger>
          </Tabs.List>
          <StyledContent value="tab1">France is here 🇫🇷</StyledContent>
          <StyledContent value="tab2">Kenya is here 🇰🇪</StyledContent>
          <StyledContent value="tab3">Austria is here 🇦🇹</StyledContent>
        </Tabs.Root>
      </Box>
    </>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape