JSX is superior https://twitter.com/davesnx/status/1579849341866364934

index.js

box(
  {
    padding: 5,
    width: "320px",
    border: "sm",
    onClick: onClick,
    onMouseLeave: onMouseLeave,
  },
  [
    stack({ gap: 2, align: "center" }, [
      image({ borderRadius: "md", src: "https://via.placeholder.com/350x150" }),
      row({ gap: 2, align: "left" }, [
        badge({ color: "#702459" }, "Plus"),
        spacer({ left: 2 }, [
          text(
            { size: "sm", weight: "bold", color: "#702459" },
            "VERIFIED | CAPE TOWN"
          ),
        ]),
      ]),
      text(
        { size: "xl", weight: "semibold" },
        "Modern, Chic Penthouse with Mountain, City & Sea Views"
      ),
      text({}, "$119/night"),
      row({ gap: 1, align: "left" }, [
        icon({ src: "https://via.placeholder.com/25x25", color: "#ED8936" }),
        text({ size: "sm" }, [
          text({ size: "sm", weight: "bold" }, "4.84"),
          " (190)",
        ]),
      ]),
    ]),
  ]
);

index.jsx

<Box
  padding={5}
  width="320px"
  border="sm"
  onClick={onClick}
  onMouseLeave={onMouseLeave}
>
  <Stack gap={2} align="center">
    <Image borderRadius="md" src="https://via.placeholder.com/350x150" />
    <Row gap={2} align="left">
      <Badge color="#702459">Plus</Badge>
      <Spacer left={2}>
        <Text size="sm" weight="bold" color="#702459">
          VERIFIED | CAPE TOWN
        </Text>
      </Spacer>
    </Row>
    <Text size="xl" weight="semibold">
      Modern, Chic Penthouse with Mountain, City & Sea Views
    </Text>
    <Text>$119/night</Text>
    <Row gap={1} align="left">
      <Icon src={"https://via.placeholder.com/25x25"} color="#ED8936" />
      <Text size="sm">
        <Text size="sm" weight="bold">
          4.84
        </Text>{" "}
        (190)
      </Text>
    </Row>
  </Stack>
</Box>;