Theme · Company Site · Beginner

Real Estate Listings

Real estate listings = a search bar with filters, a property card grid with price and specs, and a map plus agent panel.

Skip to the modify prompt →

Find your next place

Homes you'll actually want to come back to.

Verified listings, virtual tours, and a local agent in every neighborhood.

City, neighborhood, or ZIP… HouseApartmentLand

$685,0003 bd · 2 ba · 1,420 sqft14 Maple St

$1.2M4 bd · 3 ba · 2,300 sqft88 Cedar Ave

$540,0002 bd · 1 ba · 980 sqft5 Birch Ln

$920,0003 bd · 2 ba · 1,760 sqft21 Oak Dr

$465,0001 bd · 1 ba · 720 sqft3 Elm Ct

$1.45M5 bd · 4 ba · 3,100 sqft9 Pine Hill

●

JJordan ReyesListing agent

How to prompt it

Build a clean real-estate listings site for a brokerage called "Haven".

STYLE
- Airy #f4f6f8 page, ink #1d1d1f text, green accent #1f7a5c
- White cards, hairline #ececf0 borders, 10px radii, generous whitespace
- System sans; the accent appears on the primary button and the active filter

LAYOUT
- Top bar: "Haven" wordmark left, links Buy / Rent / Sell, a pill "List property" button right
- A search row: a rounded search field ("City, neighborhood, or ZIP…") and filter pills House (active), Apartment, Land
- A property grid (3 across desktop): each card has a photo block, a price, a specs line (beds · baths · sqft), and an address
  - $685,000 — 3 bd · 2 ba · 1,420 sqft — 14 Maple St
  - $1.2M — 4 bd · 3 ba · 2,300 sqft — 88 Cedar Ave
  - $540,000 — 2 bd · 1 ba · 980 sqft — 5 Birch Ln
- [tall] A map panel (with a location pin) beside an agent card: avatar "J", "Jordan Reyes", "Listing agent", and a "Contact" button
- [tall] Footer: "© 2026 Haven" + Search · Saved · Mortgage

COMPONENTS
- Navbar, search, button, card
- Property card: photo, price (bold), meta line, address

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the property grid and the filter pills.

CHANGES
- Add a "Price" sort control to the search row
- Add two more property cards (six total on desktop)
- Show a small "New" badge on one card

DO NOT
- Do not touch the map or the agent panel
- Do not change the card anatomy (photo, price, specs, address)

Build a clean, accessible real-estate listings site for "Haven".

STYLE
- #f4f6f8 base, #1d1d1f ink, green #1f7a5c accent, white cards, hairline #ececf0, 10px radii
- System sans; type scale 9/10/11/12/14px

LAYOUT
- Sticky top bar: wordmark, Buy / Rent / Sell, pill "List property"
- Search row: search field + filter pills House (active), Apartment, Land
- Property grid (3 across desktop, 2 tablet, 1 mobile): photo, price, specs, address
  - $685,000 3bd·2ba·1,420sqft 14 Maple St / $1.2M 4bd·3ba·2,300sqft 88 Cedar Ave / $540,000 2bd·1ba·980sqft 5 Birch Ln
  - $920,000 3bd·2ba·1,760sqft 21 Oak Dr / $465,000 1bd·1ba·720sqft 3 Elm Ct / $1.45M 5bd·4ba·3,100sqft 9 Pine Hill
- Map panel + agent card (avatar, name, role, Contact)
- Footer: copyright + Search · Saved · Mortgage

COMPONENTS
- Navbar, search, button, card, link
- Property card is keyboard-focusable; the whole card is a button, not a nested link

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- Full keyboard focus rings; every icon-only control has an aria-label
- prefers-reduced-motion: hovers settle instantly

MOTION
- Card hover: 120ms ease-out lift + soft shadow
- No autoplaying map motion

Modify prompts change only the target — the rest of your page stays untouched.

Tips

Keep the photo as a calm gradient placeholder until real photography lands. Lead each card with the price — that is what a buyer scans first.

Real Estate Listings

Homes you'll actually want to come back to.

Tips

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns