Mobile Notifications Screen — Free HTML CSS JS UI

A notifications screen is a grouped inbox of activity — new items highlighted, older ones grouped below, each dismissible, with a "mark all read" shortcut and an empty state when you are caught up. This snippet builds a complete, interactive one inside a CSS phone frame: tapping an item marks it read, double-tapping dismisses it with a swipe-away, mark-all-read clears every unread dot at once, and empty groups and the whole list resolve to a friendly caught-up message — in HTML, CSS, and vanilla JavaScript with no dependency.

Grouped, with unread state

Notifications are split into "New" and "Earlier" groups. Unread items carry an unread class that tints their card and shows a blue dot on the right; read items are plain white with no dot. This two-tier styling is the standard way inboxes separate what needs attention from what you have already seen, and it is driven by a single class so the state is easy to flip.

Tap to read, one delegated listener

Instead of binding a handler to every row, a single click listener on the list uses event.target.closest('.mnt-item') to find which notification was tapped — event delegation, so newly added items would work automatically and there is only one listener to manage. Tapping an unread item removes its class and its dot, then re-evaluates the screen state.

Mark all read and a smart button

The header button clears the unread class and dot from every item at once. It also disables itself when there is nothing unread left, using the :disabled state to grey out — so the control accurately reflects whether there is anything to act on, rather than sitting active over an already-read inbox.

Swipe-to-dismiss and self-healing groups

Double-tapping a notification adds a swipe class that slides it off to the left and fades it, then removes it from the DOM after the transition. A shared updateState() function then hides any group whose items are all gone and reveals the all-caught-up empty state when the list is finally empty — so the screen never shows a stranded group header or a blank void.

Accessibility and performance

The mark-all-read control is a real <button> that disables itself when there is nothing unread, so its state is exposed to assistive tech through the native disabled attribute rather than styling alone. When you adapt this, make each notification a button or link so it is keyboard-focusable, reinforce the unread state with text — a "new" label or the count in the group header — rather than relying on the blue tint and dot, and announce changes through an aria-live region so marking read or dismissing is spoken. Performance is a deliberate win of the delegation approach: a single click listener on the list handles every current and future row via closest(), so there are no per-item listeners to attach or clean up, and marking read toggles one class and removes one dot node. Dismissal animates with a CSS transition and removes the node on completion, and updateState() does a couple of cheap querySelectorAll counts. For a very large inbox you would paginate or virtualize, but the delegated model already scales far past a typical screen of notifications.

Reusing it

Feed notifications from your API, persist read state, and replace the double-tap dismiss with a real swipe gesture using Pointer Events if you want touch-drag. Lift the list out of the phone frame for a responsive web notification center, or keep it framed beside a notification center panel to present a full activity feed.