Create a local business hero with Tailwind CSS for a shop or restaurant. Use a two-column grid inside a bordered rounded-2xl card on a warm neutral-50 page. The left column has a small category line reading the trade and neighbourhood, a large headline with the business name, a two-sentence description, a row of two buttons — a dark "Book a table" and a bordered "Call us" with a phone glyph — and under them a green "Open now" pill with the closing time. The right column is an information panel divided by hairlines: an address block with a pin glyph and a "Get directions" link, an opening-hours list of seven rows with the day on the left and hours right-aligned, today set in medium weight with a subtle neutral-100 background, and a last row noting the kitchen closes earlier. Finish the card with a footer strip of three muted facts — payment methods, step-free access and dog policy.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a local business hero with Tailwind CSS for a shop or restaurant. Use a two-column grid inside a bordered rounded-2xl card on a warm neutral-50 page. The left column has a small category line reading the trade and neighbourhood, a large headline with the business name, a two-sentence description, a row of two buttons — a dark "Book a table" and a bordered "Call us" with a phone glyph — and under them a green "Open now" pill with the closing time. The right column is an information panel divided by hairlines: an address block with a pin glyph and a "Get directions" link, an opening-hours list of seven rows with the day on the left and hours right-aligned, today set in medium weight with a subtle neutral-100 background, and a last row noting the kitchen closes earlier. Finish the card with a footer strip of three muted facts — payment methods, step-free access and dog policy.
