Food Delivery App Home Screen

Food delivery app home screen with address picker sheet, search, category chips, promo banner, popular restaurant cards with ratings and a bottom tab bar.

Also known as: food delivery app ui, restaurant app home screen, food ordering app template, mobile app home screen html, delivery app with bottom navigation

Tailwind CSS Mobile Home & Feed Responsive #app #cards #food #mobile #search #tab-bar

Food Delivery App Home Screen live demo

Open in new tab

Tailwind CSS code (HTML, CSS, JS)

Beautify

A food delivery app home screen built with Tailwind CSS: a delivery address header with a bottom sheet picker, search, round category chips, a promo banner, popular restaurant cards with rating and delivery time, a filterable list and a bottom tab bar. It is an HTML mobile template for mobile websites and PWAs and can be packaged as a native app with Capacitor. Use it as the home screen or restaurant app UI of a food ordering, grocery or takeaway service.

How it works

The root .fdh-app is a phone-width column with four panels marked data-fdh-panel (home, favorites, orders, account) and a sticky .fdh-tabs bar at the bottom. showTab() in script.js shows the matching panel, sets aria-current="page" on the active .fdh-tab and switches its icon to the filled version from data-fdh-icon.

On the home panel, each .fdh-cat button carries data-fdh-cat, and typing in [data-fdh-search] matches the data-fdh-name text of every [data-fdh-item] row. applyFilters() combines both, updates the list heading and the place count, hides the promo and popular rows while filtering and shows [data-fdh-empty] when nothing matches. Heart buttons (.fdh-fav, aria-pressed) are linked by data-fdh-fav, so the popular card and the list row of the same restaurant stay in sync, and the Favorites tab is rebuilt from the saved rows.

The address in the header opens #fdh-sheet, a native <dialog> styled as a bottom sheet with radio cards. Deliver here writes the chosen address into [data-fdh-address-label].

Customization

--fdh-accent, --fdh-accent-text and --fdh-accent-soft in style.css: brand colour of the banner, badges, active tab and selected address.
font-family on .fdh-app: replace Outfit and update the Google Fonts URL.
Add a restaurant by copying an li.fdh-item; set data-fdh-category to a data-fdh-cat value and list searchable words in data-fdh-name.
Add a category by copying a .fdh-cat button with a new data-fdh-cat value.
.fdh-promo-img mask in style.css: remove the gradient mask for a hard photo edge.
Change grid-cols-4 on the tab bar list when you add or remove a tab and its data-fdh-panel.

Use cases

Food delivery and takeaway platforms: the main home screen after sign in.
Restaurant group apps: browse locations by cuisine with saved favourites.
Grocery and meal kit PWAs: categories, promos and popular stores in one view.

Accessibility

The tab bar is a nav with 60 px buttons using aria-current; focus moves to each panel heading when you switch. Category and heart buttons are toggle buttons with aria-pressed and descriptive labels. The place count and favourite changes are announced through polite live regions. The sheet is a modal dialog with a focus trap, a legend for the radio group and focus returned to the address button on close. All controls have visible focus outlines, and the sheet animation is off under prefers-reduced-motion.

Usage notes

The photos come from Unsplash; replace them with your own restaurant and dish images.

Food Delivery App Home Screen at a glance

Framework: Tailwind CSS
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Tailwind CSS, fonts.googleapis.com, Bootstrap Icons
Layout: Mobile-first app screen, centred on wider screens
Category: Mobile Home & Feed
License: Free for personal and commercial use

Questions about this template

Can I use the Food Delivery App Home Screen code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Tailwind CSS and fonts.googleapis.com and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

The Tailwind browser build is for prototyping. In production, compile Tailwind with its CLI or your bundler.