A profile screen is the account hub of a mobile app — a cover header with an avatar, follower stats, a settings list with toggles and navigation rows, and a log-out action. This snippet builds a complete, polished one inside a CSS phone frame, including working switches and a functional dark-mode toggle that restyles the whole screen, in HTML, CSS, and vanilla JavaScript with no dependency.

The cover-and-avatar header

The header is a gradient cover with a back button and an Edit button, and the avatar overlaps the bottom edge — positioned with bottom: -34px and a thick border ring so it punches through the seam, the universal profile-header pattern. A green presence dot sits on the avatar. The avatar and dot borders are theme-aware so they match the background in light and dark modes.

Pure-CSS toggle switches

The notification and dark-mode switches are real checkboxes styled into iOS-style toggles: the native input is visually hidden, and an adjacent <i> is the track whose ::after is the knob. The :checked + i sibling selector turns the track indigo and slides the knob with a transform — an accessible toggle (it's a real checkbox, keyboard-operable) with zero JavaScript for the visual state.

A dark mode that actually works

The dark-mode switch isn't decorative: toggling it adds a .dark class to the screen that restyles the background, cards, list, borders, avatar ring, and log-out button. It demonstrates a complete theming pass driven by one class, which is exactly how you'd wire a real in-app theme setting.

The settings list

Rows combine a colored icon tile, a label, and either a toggle or a chevron for navigation. Navigation rows give a tap highlight on click (a brief background flash), the standard touch feedback for list items. Stat counts sit in a divided card above, and a bordered log-out button in danger red anchors the bottom.

Reusing it

Swap the user data, stats, and rows for your own, and wire the navigation rows to your router and the toggles to real settings. Lift it out of the frame for a responsive web account page, or keep it framed beside a mobile login screen to present a full app flow.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Instead of tracing every selector by eye, paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the pf-sw checkbox and its adjacent i element combine with the checked plus i sibling selector to produce a working toggle with zero JavaScript for the visual state, or why the avatar uses a negative bottom offset to punch through the cover seam. The same assistant can help optimize it, for example checking whether the pf-screen dark class approach scales cleanly if the settings list grows to dozens of rows, or whether the tap-highlight setTimeout on nav rows could be replaced with a CSS-only active state. It is equally good for extending the screen: ask it to add a real router-aware navigation transition, persist the dark-mode choice to localStorage, or add a skeleton loading state before the profile data arrives. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a mobile "profile and settings" screen in plain HTML, CSS, and JavaScript, framed inside a CSS phone mockup, using only real form controls and CSS class toggling — no toggle-switch library.

Requirements:
- A phone frame with a status bar showing a time and a battery glyph built from CSS box shapes, not an icon font.
- A gradient cover header with a back button and an edit button, and a circular avatar absolutely positioned with a negative bottom offset so it visually overlaps the bottom edge of the cover, with a thick border ring matching the page background so it looks like it punches through the seam. Include a small presence dot on the avatar with the same border-ring trick.
- A stats row (posts, followers, following) in a card with thin vertical dividers between the three values.
- A settings list where each row has a colored square icon tile, a label, and either a toggle switch or a chevron for navigation.
- Every toggle switch must be a real checkbox input, visually hidden, placed next to a sibling element that acts as the track and uses a ::after pseudo-element as the knob; the on/off visual state must be driven purely by the CSS checked plus sibling selector, with no JavaScript required to move the knob.
- Wire exactly one of the toggles (dark mode) to real behavior: toggling it must add or remove a class on the screen container that is picked up by CSS rules restyling the background, the cards, the list borders, and the avatar/dot ring colors so they still read correctly against the dark background.
- Clicking a navigation row (chevron row) must give brief tap feedback (a background flash that fades after under 300ms) without affecting the toggle rows.
- Keep all markup keyboard-focusable and make sure the toggles remain real, accessible checkboxes rather than divs with click handlers.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA profile screen renders with a cover, avatar, and settings.
2
Toggle dark modeThe dark-mode switch restyles the entire screen.
3
Flip notificationsThe iOS-style switch animates its knob.
4
Tap a settings rowNavigation rows give a touch-highlight on tap.
5
Press EditThe Edit button toggles to Done.
6
Bind your dataSwap the user info, stats, and rows for your own.

Real-world uses

Common Use Cases

App account screens

Present settings inside a phone mockup.

Settings UIs

A mobile take on a settings panel.

Social profiles

Show stats like a user stats card.

Theme settings

Pair the switch with a color mode toggle.

Onboarding flows

Follow a mobile login screen into the profile.

Learning CSS toggles

A reference for checkbox switches and theming.

Got questions?

Frequently Asked Questions

Each is a real checkbox visually hidden next to an <i> element that acts as the track, with its ::after pseudo-element as the knob. The CSS :checked + i sibling selector turns the track on and slides the knob with a transform. Because it's a genuine checkbox, it's keyboard-accessible and needs no JavaScript for the visual on/off state.

Yes. Flipping it adds a dark class to the screen, and CSS rules under that class restyle the background, cards, list, borders, avatar ring, and log-out button. It's a complete theming pass driven by a single class — the same approach you'd use for a real in-app dark-mode setting.

The avatar is absolutely positioned with a negative bottom offset so it extends past the cover's edge, and a thick border ring in the page background color makes it appear to punch through the seam. The ring color is theme-aware so it blends with both light and dark backgrounds.

Yes. The phone frame is just a wrapper, and the profile content is independent. Lift it out for a responsive web account or settings page, wire the navigation rows to your router and the toggles to your settings store, and it works the same without the device frame.

Render the user info, stats, and settings rows from props or state. Bind the dark class to a theme value updated by the switch, and tie each toggle to a setting in state. Navigation rows call your router. The CSS switches work as-is since they're checkboxes. Tailwind styles the cover, cards, and list with utilities.

Loading…