Build a footer with Tailwind CSS where a call-to-action card overlaps its top edge. Wrap everything in a relative container: a dark neutral-950 footer with generous top padding, and inside it a white rounded-3xl card pulled upward with a negative margin so it straddles the boundary between the page and the footer. The card is a flex row on md — a headline and one supporting line on the left, a dark primary button and a ghost "Book a demo" button on the right — with a thin shadow. Under the card, the footer proper: a brand column with a wordmark, a one-line description and three small social squares, beside three link columns (Product, Company, Resources) in muted grey that brighten on hover. Close with a divider and a bottom row holding the copyright on the left and Privacy, Terms and Security links on the right, stacking on mobile.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a footer with Tailwind CSS where a call-to-action card overlaps its top edge. Wrap everything in a relative container: a dark neutral-950 footer with generous top padding, and inside it a white rounded-3xl card pulled upward with a negative margin so it straddles the boundary between the page and the footer. The card is a flex row on md — a headline and one supporting line on the left, a dark primary button and a ghost "Book a demo" button on the right — with a thin shadow. Under the card, the footer proper: a brand column with a wordmark, a one-line description and three small social squares, beside three link columns (Product, Company, Resources) in muted grey that brighten on hover. Close with a divider and a bottom row holding the copyright on the left and Privacy, Terms and Security links on the right, stacking on mobile.
