A messaging app conversation list built with Tailwind CSS: a Chats header, search, All, Unread and Groups filters, pinned chats, avatars with online dots, last message previews, read ticks, unread counts, a floating new chat button and a bottom tab bar. It is an HTML mobile template for mobile websites and PWAs and can be packaged as a native app with Capacitor. Use it as the inbox of a messenger or team chat app.
How it works
The root .mcl-app is a phone-width column. Each conversation is an li with data-mcl-chat, a data-name and a data-type of person or group; the row is a link (.mcl-row) with an optional .mcl-unread badge marked data-mcl-unread.
apply() in script.js combines the search text with the active .mcl-filter pill (aria-pressed), hides rows that do not match and shows [data-mcl-empty] when nothing is left. Tapping a row marks it as read and updateCounts() refreshes the Unread pill and the Chats tab badge.
The pencil icon and the floating .mcl-fab open #mcl-new, a native <dialog> bottom sheet with a contact search and a radio list of contacts. Submitting without a contact shows "Choose a contact to start a chat."; with a contact the sheet closes and a toast confirms the new chat. The sheet closes with Escape or a backdrop tap.
Customization
--mcl-accentand--mcl-accent-presson.mcl-appinstyle.css: blue for unread badges, times, the floating button and the active tab.--mcl-online: colour of the.mcl-onlinepresence dot; remove the dot span for offline contacts.- Add a conversation by copying an
li[data-mcl-chat]; add or remove the.mcl-unreadbadge,.mcl-preview--unreadand.mcl-time--unreadto set its unread state. - Use
.mcl-initialswith any background utility for group avatars without a photo. .mcl-typingwith.mcl-dotsshows the animated typing indicator in a preview.- Replace the toasts in the row click and sheet submit handlers with navigation to your chat screen and a call to your messaging API.
Use cases
- Messenger and chat apps: the main inbox with pinned and unread chats.
- Team and workplace chat: channels and direct messages in one list.
- Marketplace and booking apps: buyer and seller conversations.
- Support and community PWAs: a member inbox with search and filters.
Accessibility
Rows are real links, avatars are decorative and each row has hidden text for online status and unread counts. Filter pills are toggle buttons with aria-pressed, icon buttons have labels and the active tab has aria-current="page". The new chat sheet is a labelled modal <dialog> with a fieldset of radio buttons, and its error is announced with aria-live. The typing animation respects prefers-reduced-motion.
Usage notes
The portraits come from Unsplash; replace them with your own images. Names and messages are fictional. Bootstrap Icons and DM Sans load from CDNs.
