webdevpuneet.com

Related Snippets

57 in Mobile Screens category
31–36 of 57

Mobile Notifications Screen

Mobile Stories Viewer

Mobile Camera Screen

Mobile Fitness Screen

Mobile Calendar Screen

Mobile Ride-Hailing Screen

Mobile Notifications Screen — Free HTML CSS JS UI

Mobile Notifications Screen · Mobile · Plain HTML, CSS & JS · Live preview

CategoryMobile Screens
TagsTouch GesturesSocial UIMobile UI

Copy & paste

Source Code

<div class="mnt-phone">
  <div class="mnt-screen">
    <div class="mnt-status"><span>9:41</span><span class="mnt-batt"><i></i></span></div>
    <header class="mnt-head">
      <h1>Notifications</h1>
      <button class="mnt-clear" id="mntClear">Mark all read</button>
    </header>

    <div class="mnt-scroll" id="mntList">
      <div class="mnt-grp">
        <div class="mnt-gh">New</div>
        <div class="mnt-item unread" data-id="1"><span class="mnt-ic i1">❤</span><div class="mnt-body"><p><b>Theo</b> liked your post</p><small>2 min ago</small></div><span class="mnt-dot"></span></div>
        <div class="mnt-item unread" data-id="2"><span class="mnt-ic i2">💬</span><div class="mnt-body"><p><b>Sana</b> commented: "Love this!"</p><small>18 min ago</small></div><span class="mnt-dot"></span></div>
        <div class="mnt-item unread" data-id="3"><span class="mnt-ic i3">👤</span><div class="mnt-body"><p><b>Leo</b> started following you</p><small>1 hr ago</small></div><span class="mnt-dot"></span></div>
      </div>
      <div class="mnt-grp">
        <div class="mnt-gh">Earlier</div>
        <div class="mnt-item" data-id="4"><span class="mnt-ic i4">⭐</span><div class="mnt-body"><p>Your weekly summary is ready</p><small>Yesterday</small></div></div>
        <div class="mnt-item" data-id="5"><span class="mnt-ic i5">🎁</span><div class="mnt-body"><p><b>3 friends</b> joined this week</p><small>Yesterday</small></div></div>
        <div class="mnt-item" data-id="6"><span class="mnt-ic i1">❤</span><div class="mnt-body"><p><b>Iva</b> and 12 others liked your comment</p><small>Mar 9</small></div></div>
      </div>
      <p class="mnt-empty" id="mntEmpty" hidden>You're all caught up 🎉<br><span>No new notifications</span></p>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Grouped inbox
New and Earlier sections with headers.
Unread highlights
Tinted cards and a dot for unseen items.
Event delegation
One list listener via closest().
Tap to read
Clears the highlight and dot per item.
Mark all read
Clears every unread at once.
Smart clear button
Disables when nothing is unread.
Swipe-to-dismiss
Double-tap slides an item away.
Self-healing groups
Empty headers and list resolve to a caught-up state.

About this UI Snippet

Mobile Notifications Screen — Activity Inbox UI

Screenshot of the Mobile Notifications Screen snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA grouped notifications inbox renders with New and Earlier sections.
  2. 2
    Tap an unread itemIts tinted highlight and blue dot clear as it becomes read.
  3. 3
    Mark all readThe header button clears every unread dot at once, then disables itself.
  4. 4
    Double-tap to dismissA notification slides off to the left and is removed from the list.
  5. 5
    Empty a groupWhen a group's items are all gone, its header disappears too.
  6. 6
    Clear everythingDismiss all notifications and an all-caught-up empty state appears.

Real-world uses

Common Use Cases

Activity inbox screens
Group alerts into New and Earlier sections, as the mobile counterpart of a notification center panel.
Social app notifications
Pair with a mobile feed screen so likes and comments in the feed arrive as unread items here.
Unread badge counts
Feed the unread total into a notification badge, with tap-to-read clearing both the tint and the dot per item.
Dismissal patterns
Compare tap and swipe dismissal with a swipe delete list, and see how mark all read clears everything at once.
Event delegation reference
Study one list listener using closest() to handle every row, with an empty state appearing when the user is fully caught up.
Related: Mobile Keyboard Guide — Correct inputmode/type/pattern Per Field
See the Mobile Keyboard Guide — Correct inputmode/type/pattern Per Field for a related mobile pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The click handler is bound once to the list container and uses event.target.closest('.mnt-item') to find which row was tapped. This is event delegation: it works for any current or future item without per-row listeners, and there is only one handler to reason about. Tapping an unread item removes its class and dot.

After any read or dismiss action, updateState counts remaining unread items and disables the button when that count is zero, styled via the :disabled state. This keeps the control honest — it is only tappable when there is actually something unread to clear, rather than sitting active over an already-read inbox.

Double-tapping a notification adds a swipe class that translates it off the left edge and fades it out, and after the transition it is removed from the DOM. To support a real drag gesture, replace the double-click with Pointer Events that track horizontal movement and commit the dismiss past a threshold.

The shared updateState function runs after every change. It hides any group whose item list is empty and reveals the all-caught-up message when no items remain. That way you never see a stranded New or Earlier header with nothing under it, and an emptied inbox shows a friendly state instead of a blank area.

Hold notifications as an array with read flags and render grouped by section. Mark read by updating the item's flag and dismiss by filtering it out of state rather than removing DOM nodes. Derive the disabled button and empty state from the array. For dismissal animation, animate on exit with a transition group. Tailwind expresses the cards and highlights with utilities.

Track pointer events on each row: record the start x on pointerdown, translate the row by the horizontal delta on pointermove, and on pointerup either snap it back if the drag was small or commit the dismiss if it passed a threshold like a third of the width. Reuse the existing swipe class transition for the commit animation so the row slides fully off and is then removed. Keep the double-tap or a visible delete button as a fallback for keyboard and assistive users.