→ Julian Parker
→ Minimalist User Comment Section with Pro...

Minimalist User Comment Section with Profile Images

A lightweight, responsive comment section featuring user profile images, timestamps, and nested replies for improved user engagement.

This Example is contributed by Julian Parker, on 12-Mar-2025. It is responsive. similar terms for this example is User Avatars

Avatar Comment Section Comment Thread

Author Julian Parker

Fork Fullscreen

<div class="comments-container">
  <h2>Comments (5)</h2>
  
  <div class="comment-form">
    <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Your Avatar" class="avatar">
    <textarea placeholder="Add a comment..."></textarea>
    <button class="post-btn">Post</button>
  </div>
  
  <div class="comments-list">
    <div class="comment">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="avatar">
      <div class="comment-content">
        <div class="comment-header">
          <span class="username">michael_s</span>
          <span class="timestamp">2 hours ago</span>
        </div>
        <p>This is exactly what I was looking for! The documentation is very clear and helpful.</p>
        <div class="comment-actions">
          <button class="like-btn">Like</button>
          <button class="reply-btn">Reply</button>
        </div>
        
        <div class="nested-comments">
          <div class="comment">
            <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar" class="avatar">
            <div class="comment-content">
              <div class="comment-header">
                <span class="username">lisa_dev</span>
                <span class="timestamp">45 minutes ago</span>
              </div>
              <p>I agree! I implemented this in my project and it works flawlessly.</p>
              <div class="comment-actions">
                <button class="like-btn">Like</button>
                <button class="reply-btn">Reply</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="comment">
      <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="avatar">
      <div class="comment-content">
        <div class="comment-header">
          <span class="username">emma_j</span>
          <span class="timestamp">5 hours ago</span>
        </div>
        <p>Has anyone tried implementing this on a mobile app? Any tips would be greatly appreciated!</p>
        <div class="comment-actions">
          <button class="like-btn">Like</button>
          <button class="reply-btn">Reply</button>
        </div>
      </div>
    </div>
    
    <div class="comment">
      <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="avatar">
      <div class="comment-content">
        <div class="comment-header">
          <span class="username">dev_guru</span>
          <span class="timestamp">Yesterday</span>
        </div>
        <p>Great work! One suggestion would be to add syntax highlighting for code snippets in the comments.</p>
        <div class="comment-actions">
          <button class="like-btn">Like</button>
          <button class="reply-btn">Reply</button>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Modern Flexible User Profile Card
A clean and flexible user profile card with avatar, user information, and social stats designed with a modern aesthetic and responsive layout.

Author:
Anonymous

4 months ago
Stacked Profile Images UI Component
A customizable stacked profile images component that displays team members or users in an overlapping arrangement to save space while showing group membership.

Author:
Maya Johnson

4 months ago
User Avatars Grid Layout
A responsive grid layout for displaying user avatars that adapts beautifully to any screen size, perfect for team pages or user directories.

Author:
Anonymous

4 months ago
Features list with icons

Author:
Jordan McKenzie

5 months ago
Personal Profile Card with Bio Introduction

Author:
Jordan McKenzie

5 months ago
Profile Card with Social Media Links

Author:
Anonymous

4 months ago
Elegant Profile Hover Card with Animation Effects
A stylish hover card that reveals detailed user information with a smooth animation when hovering over a profile thumbnail.

Author:
Maya Johnson

4 months ago
Leave a Comment Section

Author:
Anonymous

5 months ago
Minimalist User Avatar Icon

Author:
Anonymous

4 months ago
User Avatar Card
A responsive user avatar card featuring online status indicator, follow button, and dark mode support with smooth transitions for modern web applications.

Author:
Alexandra Sinclair

4 months ago
Client Testimonial Slider with Star Rating System
Showcase your customer reviews with these elegant testimonial cards featuring a star rating system that highlights positive feedback and builds trust.

Author:
Bishnu Thapa

4 months ago
Dynamic Testimonial Cards with User Ratings

Author:
Anonymous

4 months ago

Didn't find component you were looking for?

Search from 500+ components