Tailwind Restaurant Listing Design

Customer: AI | Published: 09.03.2026
Бюджет: 250 $

I'm building a restaurant-listing platform and need a polished, modern interface built entirely with Tailwind CSS. The look I'm after is clean and contemporary, lots of breathing room, crisp typography, subtle micro-interactions, and a colour palette that feels fresh without shouting. The main use case for the site will be mobile, so mobile first design approach is paramount. Scope Design and code responsive layouts for four core views: Home, Search Results (with maps integration), Restaurant Detail, and Menu. Use utility-first Tailwind classes only. Include states for hover, focus, mobile nav, filters, and pagination where relevant. Keep components modular (cards, rating badges, tags, buttons, breadcrumb, hero, CTA blocks) so I can mix and match later. Description of the pages: Homepage -> mainly a saas-type content page to entice users to explore and restaurant owners to list their restaurant. No fancy integration needed at this point. Search page -> airbnb-type search page with maps integration and multiple, interactive pins. multiple filters to be able to find matching restaurant. majority of traffic on this page will be mobile so usability on mobile is key. Restaurant detail -> key data, maps and location, contacts, ratings, menus (as icon or listed) Menu -> a mobile friendly view of the menu in multiple variations (with / without images, ordered by course, daily menu with indication for date validity) Generally I like docks in mobile views to clean up the navigation. Please find a way to incorporate this functionality. Deliverables 1.Tailwind-powered HTML files 2. A short README explaining class naming, breakpoints, and any custom config added to tailwind.config.js. Screenshots or quick Loom walkthrough confirming responsiveness. Acceptance criteria Renders correctly in the latest Chrome, Safari, and Firefox. Mobile first, scales gracefully up to desktop >=1440 px. No visual debt: colour contrast AA minimum, fonts served via Google Fonts (or system fonts), and imagery uses freely licensed placeholders. If you've crafted similar listing UIs before, share a link or repo and let's get started. Approach: Wireframes Design elements Design details / pages for feedback rounds Hand-over of code To indicated that you have read and understood the requirements, please start your bid with &. All bids that do not comply with this requirement will be disregarded and blacklisted immediately. In case of questions, do not hesitate to ask. I don't mind you using AI to create this as long as you openly declare this beforehand. We are looking to finalise within this week so make sure resources are available.