Signup funnel

1 – 31 July · web only

Visited pricing

24,180

100%

−13,420 left without clicking (55.5%)

Started signup

10,760

44.5%

−4,102 abandoned the form (38.1%)

Verified email

6,658

27.5%

−2,244 never returned (33.7%)

Connected a source

4,414

18.3%

−1,986 stopped before the first query (45.0%)

Ran a query

2,428

10.0%

24,180

Entered

2,428

Completed

10.0%

End to end

">

The prompt

Design a conversion funnel block with Tailwind CSS. Inside a bordered rounded-2xl card, put a header row with a title, a muted date range and a small select for the segment. Below, five funnel rows stacked vertically: each row has a label and a count on the left in a fixed-width column, then a bar whose width is set inline as a percentage on a neutral-100 track, with the fill in neutral-900 and the conversion percentage printed inside the fill when it is wide enough or beside it when it is not. Between consecutive rows, a small indented note in muted red-ish text showing how many people dropped and the percentage lost. Under the rows, a summary strip with three figures — entered, completed and overall conversion — separated by vertical rules. Keep every number monospaced so the columns line up.

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