export default function Example() {
  return (
    <>
      <Box
        css={{
          display: "flex",
          width: 500,
          rowGap: "$100",
          flexDirection: "column",
        }}
      >
        <Box
          css={{
            display: "flex",
            width: 500,
            rowGap: "$100",
            flexDirection: "column",
            padding: "10px",
            border: "1px dashed black",
          }}
        >
          <Tabs.Root defaultValue="tab1">
            <Tabs.List aria-label="Countries' information" density="compact">
              <Tabs.Trigger value="tab1"> France </Tabs.Trigger>
              <Tabs.Trigger value="tab2">Brazil</Tabs.Trigger>
              <Tabs.Trigger value="tab3">Vietnam</Tabs.Trigger>
            </Tabs.List>
          </Tabs.Root>
        </Box>
        <Box
          css={{
            display: "flex",
            width: 500,
            rowGap: "$100",
            flexDirection: "column",
            padding: "10px",
            border: "1px dashed black",
          }}
        >
          <Tabs.Root defaultValue="tab1">
            <Tabs.List aria-label="Countries' information" density="default">
              <Tabs.Trigger value="tab1"> France </Tabs.Trigger>
              <Tabs.Trigger value="tab2">Brazil</Tabs.Trigger>
              <Tabs.Trigger value="tab3">Vietnam</Tabs.Trigger>
            </Tabs.List>
          </Tabs.Root>
        </Box>
        <Box
          css={{
            display: "flex",
            width: 500,
            rowGap: "$100",
            flexDirection: "column",
            padding: "10px",
            border: "1px dashed black",
          }}
        >
          <Tabs.Root defaultValue="tab1">
            <Tabs.List aria-label="Countries' information" density="loose">
              <Tabs.Trigger value="tab1"> France </Tabs.Trigger>
              <Tabs.Trigger value="tab2">Brazil</Tabs.Trigger>
              <Tabs.Trigger value="tab3">Vietnam</Tabs.Trigger>
            </Tabs.List>
          </Tabs.Root>
        </Box>
      </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