```jsx
export const ListGroupPage = () => (
  <div className="w-full md:w-4/12">
    <ListGroup>
      <ListGroupItem className="bg-blue-700">First Item</ListGroupItem>
      <ListGroupItem className="bg-green-700">Second Item</ListGroupItem>
      <ListGroupItem className="bg-purple-900">Third Item</ListGroupItem>
    </ListGroup>
  </div>
);

function ListGroup({ children }) {
  return <ul className="list-reset flex flex-col pl-0 mb-0">{children}</ul>;
}

function ListGroupItem({ children, className }) {
  return (
    <a
      tabIndex={0}
      className={`${className} relative block py-3 px-5 relative -mb-px block border border-grey`}
    >
      {children}
    </a>
  );
}
```
