Fitness App Onboarding Screens

Fitness app onboarding screens with three swipeable steps, SVG illustrations, progress dots, Skip and Get started, built as a mobile app intro walkthrough.

Also known as: app onboarding screens, fitness app intro slides, mobile walkthrough screen, welcome screens with progress dots, workout app onboarding ui

Tailwind CSS Onboarding Screens Responsive #app #carousel #fitness #mobile #onboarding

Fitness App Onboarding Screens live demo

Open in new tab

Tailwind CSS code (HTML, CSS, JS)

Beautify

Fitness app onboarding screens built with Tailwind CSS: three swipeable intro steps (track workouts, follow a plan, see progress) with SVG illustrations, progress dots, a Skip button and a Get started action. It is an HTML mobile template for mobile websites and PWAs, and the same markup can be packaged as a native app with Capacitor. Use it as the welcome walkthrough or app intro slides of a workout, running or gym app.

How it works

The root .fob-app is a phone-width column (max-w-[430px], min-h-dvh) centred on a neutral page. The [data-fob-track] element is a horizontal scroll container with Tailwind's snap-x snap-mandatory, so people can swipe between the three .fob-slide sections natively. Each slide holds an inline SVG illustration inside .fob-art, a short label, a heading and one paragraph.

script.js listens to the track's scroll event and works out the active step from scrollLeft. It then sets aria-current="step" on the matching [data-fob-dot] button, marks the other slides aria-hidden, and changes the [data-fob-next-label] text from "Next" to "Get started" on the last step. The Next button, the dots and the arrow keys move the track with scrollTo(). Skip jumps to the last step. Get started hides the track and footer and shows the [data-fob-done] state, where Replay intro starts again.

Customization

--fob-accent on .fob-app in style.css: colour of the active progress dot; match it to the bg-lime-400 classes on .fob-next and the logo tile.
--fob-art-height in style.css: height of the illustration panel (default min(46dvh, 360px)), so shorter phones keep the button visible.
font-family on .fob-app: swap Plus Jakarta Sans for your brand font and update the Google Fonts URL.
Add a fourth .fob-slide and a matching [data-fob-dot] button; the script counts the slides, so no other change is needed.
Replace the inline SVGs in .fob-art with your own illustrations or screenshots of your app.
In the finish() function in script.js, redirect to your sign-up screen instead of showing [data-fob-done].

Use cases

Workout and running apps: explain tracking, plans and progress before account creation.
Gym and studio membership PWAs: introduce class booking and progress features on first launch.
Health coaching apps packaged with Capacitor: a native-feeling welcome walkthrough.

Accessibility

The track is focusable, has an aria-label and responds to Left, Right, Home and End. Slides are groups with aria-roledescription="step" and a "1 of 3" style label, and inactive slides are hidden from screen readers. Each dot is a 44 px tall button with an aria-label, and the current one carries aria-current. A polite live region announces the step after each move, focus moves to the success heading after Get started, and visible focus outlines are kept everywhere. Scrolling is instant and the dot animation is off under prefers-reduced-motion.

Usage notes

The illustrations are inline SVG, so there are no image requests. Bootstrap Icons and Plus Jakarta Sans load from CDNs listed in the snippet settings.

Fitness App Onboarding Screens 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: Onboarding Screens
License: Free for personal and commercial use

Questions about this template

Can I use the Fitness App Onboarding Screens 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=Plus+Jakarta+Sans: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.