Banking App Dashboard

Banking app dashboard screen with a hideable balance card, send, request and top up sheets, a weekly spending chart, recent transactions and a bottom tab bar.

Also known as: mobile banking app ui, bank account home screen, fintech app dashboard, wallet app balance screen, money transfer app template

Tailwind CSS Mobile Dashboards Responsive #app #chart #dashboard #finance #mobile #tab-bar

Banking App Dashboard live demo

Open in new tab

Tailwind CSS code (HTML, CSS, JS)

Beautify

A banking app dashboard built with Tailwind CSS: a navy balance card with a hide toggle, quick actions for send, request and top up, a spending chart, recent transactions and a bottom tab bar. It is an HTML mobile template for mobile banking websites and PWAs and can be packaged as a native app with Capacitor. Use it as a fintech, wallet or money transfer app UI.

How it works

The root .bkd-app is a phone-width column with four panels marked data-bkd-panel (home, cards, activity, profile) and a sticky .bkd-tabs bar. showTab() in script.js shows the matching panel, sets aria-current="page" on the active .bkd-tab, switches its icon to the filled version from data-bkd-icon and moves focus to the panel heading.

Every amount carries data-bkd-money. The eye button [data-bkd-hide] masks all of them at once and remembers the choice in localStorage when the browser allows it. Rows come from the TRANSACTIONS array, cloned from template[data-bkd-row] into the recent list and the searchable Activity list. Dates use daysAgo, so labels stay relative to today.

The chart draws the WEEK or MONTHS array as .bkd-bar buttons, switched by [data-bkd-period]. Send and Request share the #bkd-transfer bottom sheet, a native <dialog> with contact radios and amount validation; Top up opens #bkd-topup. Both update the balance and lists and end with a success state.

Customization

--bkd-navy, --bkd-mint and --bkd-mint-text on .bkd-app in style.css: brand colours of the card, icons, active tab and buttons.
TRANSACTIONS in script.js: change merchants, cat, Bootstrap Icons name in icon, tone (mint, amber, blue, rose) and amount.
WEEK and MONTHS in script.js: replace with real spending totals from your API.
balance in init(): starting balance used by validation and the available hint.
validateAmount(): adjust the $5,000 transfer limit or add your own rules.
font-family on .bkd-app: replace Manrope and update the Google Fonts URL.

Use cases

Mobile banking apps: the home screen after sign in with balance and recent activity.
Digital wallets and fintech PWAs: send, request and top up in one tap.
Expense and budgeting apps: weekly and monthly spending at a glance.
Neobank prototypes: a realistic dashboard for user testing or a pitch.

Accessibility

The tab bar is a nav with 60 px buttons and aria-current. The eye button and chart period buttons are toggle buttons with aria-pressed; chart bars have full labels, can be moved with the arrow keys and announce the selected value through a live region. Sheets are modal dialogs: Escape and the backdrop close them, and focus returns to the action that opened them. Errors appear next to their fields with aria-invalid. Animations stop under prefers-reduced-motion.

Usage notes

The portraits come from Unsplash; replace them with your own images. Swap the setTimeout in the transfer submit handler for a fetch() call to your payments API.

Banking App Dashboard 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 Dashboards
License: Free for personal and commercial use

Questions about this template

Can I use the Banking App Dashboard 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=Manrope:wght@400;500;600;700;800&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.