Comment Sections – 8 Free CSS, Bootstrap & Tailwind Sets
Comments is a pack of eight sets of comment sections, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using .card, .btn, .badge, .form-control, .form-select, .form-check, .spinner-border and .alert where they fit, and Tailwind CSS 4. The sets cover comment box forms with a live character count and a markdown toolbar, nested comment threads with collapsible branches and inline replies, a blog comment section with sorting and Load more, voting and emoji reactions, review-style comments with helpful votes, comments pinned to a line of code or a paragraph, a dark forum topic and a modern CSS set built on :has(), container queries and field-sizing. Avatars are initials, and everything runs in the browser with no backend.
A good comment section makes the conversation easy to follow and easy to join. Replies belong in nested lists so the structure survives without the indentation, every comment needs an author and a time element a machine can read, and a collapsed branch should say how many replies it hides. Forms need visible labels, errors written next to the field and a character count that warns before the limit rather than after. Votes, likes and reactions are toggle buttons that say whether they are pressed and whose comment they apply to, and score changes are announced quietly rather than read out on every key. Load more and new replies should move focus to the first new comment, so keyboard users do not have to hunt for it.
