export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        width: "100%",
        flexWrap: "wrap",
        gap: "$100",
      }}
    >
      <Card
        css={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          padding: "0",
          width: "300px",
        }}
      >
        <h4>Weeknight Ramen Bowls</h4>
        <Accordion.Root type={ACCORDION_TYPE.single} collapsible={true}>
          <Accordion.Item value={"item-1"}>
            <Accordion.Trigger css={{ padding: "$100" }}>
              View the recipe
            </Accordion.Trigger>
            <Accordion.Content css={{ padding: "$100" }}>
              Step 1 Add one cup of water to a medium pot and bring to a boil.
              Add the coconut milk, noodles, green beans and peanut butter, if
              using, and cook, stirring now and then, for about 3 minutes. Step
              2 Remove from the heat and add the curry powder and half of the
              spice mix from the ramen packet and stir until fully dissolved,
              about 1 minute. (Discard the remaining spice mix.) Transfer the
              ramen and its broth to a large bowl and place the cheese on top.
              Dust with more curry powder and serve.
            </Accordion.Content>
          </Accordion.Item>
        </Accordion.Root>
      </Card>
    </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