Build a log viewer with Tailwind CSS. The toolbar holds a service select, a search field with a magnifier glyph, four severity toggle chips for debug, info, warn and error with counts, a "Live" pill with a pulsing green dot, and a pause button. The body is a dark rounded-xl panel of monospaced log lines: each line has a muted timestamp, a coloured severity tag of fixed width, a service name in a dimmer colour, and the message, with error lines given a faint red left border and a slightly tinted background. Under the panel, a status bar with the line count on the left and the retention window on the right. Then add JavaScript that appends a new random line every second while live, caps the buffer at eighty lines, auto-scrolls to the bottom unless the user has scrolled up, toggles severities on and off, filters on the search text and switches the pause button between paused and live states.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a log viewer with Tailwind CSS. The toolbar holds a service select, a search field with a magnifier glyph, four severity toggle chips for debug, info, warn and error with counts, a "Live" pill with a pulsing green dot, and a pause button. The body is a dark rounded-xl panel of monospaced log lines: each line has a muted timestamp, a coloured severity tag of fixed width, a service name in a dimmer colour, and the message, with error lines given a faint red left border and a slightly tinted background. Under the panel, a status bar with the line count on the left and the retention window on the right. Then add JavaScript that appends a new random line every second while live, caps the buffer at eighty lines, auto-scrolls to the bottom unless the user has scrolled up, toggles severities on and off, filters on the search text and switches the pause button between paused and live states.
