The prompt

Build an integrations directory with Tailwind CSS. Start with a heading, a muted subline giving the count of available integrations, and a controls row holding a search input with a magnifier glyph on the left and a set of filter chips — All, Data, Comms, Deploy, Billing — where the active chip is dark. Below, a responsive grid of integration cards, three or four across: each card is a rounded-xl bordered tile with a square logo placeholder holding a monogram, the product name, a one-line description, and a footer row with a small category label and either a muted "Connected" state with a green dot or a neutral "Connect" text button. Include ten cards across the categories. Under the grid, a centred bordered strip inviting people to request an integration with a small link. Then add JavaScript that filters the cards by chip category and by a case-insensitive match on the name and description, shows a "no matches" line when the grid empties, and keeps the count in the subline accurate.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? Open the Tailwind source.