```jsx
export const ListGroupPage = () => (
  <div className="w-full md:w-4/12">
    <ListGroup>
      <ListGroupItem className="cursor-pointer hover:bg-gray-300" href="#">
        First Item
      </ListGroupItem>
      <ListGroupItem className="cursor-pointer hover:bg-gray-300" href="#">
        Second Item
      </ListGroupItem>
      <ListGroupItem className="cursor-pointer hover:bg-gray-300" href="#">
        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, href }) {
  return (
    <a
      href={href}
      className={`${className} relative block py-3 px-5 relative -mb-px block border border-grey`}
    >
      {children}
    </a>
  );
}
```
