JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

TypeScript

import { ReactNode } from "react";

type OrderedListProps = {
  kind: "ordered";
} & React.ComponentProps<"ol">;

type UnorderedListProps = {
  kind: "unordered";
} & React.ComponentProps<"ul">;

type ListProps = UnorderedListProps | OrderedListProps;

export const List = (props: ListProps) => {
  switch (props.kind) {
    case "ordered":
      return <ol {...props}>{props.children}</ol>;
    case "unordered":
      return <ul {...props}>{props.children}</ul>;
    default:
      const x: never = props;
  }
};

type ListItemProps = React.ComponentProps<"li"> & {
  children: ReactNode;
};

List.Item = ({ children, ...props }: ListItemProps) => {
  return <li {...props}>{children}</li>;
};