<Box css={{ width: "304px", height: "300px", paddingTop: "25px" }}>
  <NavigationMenu.Root>
    <NavigationMenu.List>
      <NavigationMenu.Item>
        <NavigationMenu.Trigger>
          {`See details`}
          <Icon
            label=""
            css={{
              transition: "transform $fast $inOut",
              "[data-state=open] &": { transform: "rotate(-180deg)" },
            }}
          >
            <ChevronDown />
          </Icon>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content
          css={{ maxWidth: "304px", paddingInline: "$150" }}
        >
          <p>
            The texture of a Honeycrisp Apple is no accident: Its cells have
            been bred to be bigger than cells in other apples, making the fruit
            feel juicier and crunchier than its competitors. These cells explode
            as your teeth tear into them. Then there's its distinct flavor — a
            clean, clarified sweetness that's almost frosty.
            <Box
              as="a"
              href="#"
              css={{ color: "$accessible" }}
            >{`Learn more`}</Box>
          </p>
        </NavigationMenu.Content>
      </NavigationMenu.Item>
    </NavigationMenu.List>
  </NavigationMenu.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