Create customizable comment sections for your website
This is a great article! Really helped me understand the concept better.
Would love to see a follow-up post diving deeper into this topic.
<div class="comments-section comments-card"> <div class="comments-header"> <h3 class="comments-title">Comments (2)</h3> <select class="comments-sort"> <option value="newest">Newest First</option> <option value="oldest">Oldest First</option> <option value="popular">Most Popular</option> </select> </div> <form class="comment-form"> <div class="form-avatar">You</div> <div class="form-input-wrapper"> <textarea class="form-textarea" placeholder="Write a comment..." rows="3"></textarea> <button type="submit" class="form-submit btn-filled">Post Comment</button> </div> </form> <div class="comments-list"> <div class="comment comment-reply" data-comment-id="1"> <div class="comment-header"> <div class="comment-avatar">JD</div> <div class="comment-meta"> <span class="comment-author">John Doe</span> <span class="comment-time">2 hours ago</span> </div> </div> <div class="comment-body"> <p class="comment-content">This is a great article! Really helped me understand the concept better.</p> </div> <div class="comment-actions"> <button class="comment-action like-btn" aria-label="Like comment"><span class="like-icon" aria-hidden="true">♥</span> <span class="like-count">12</span></button> <button class="comment-action reply-btn" aria-label="Reply to comment">Reply</button> </div> <div class="comment-replies"> <div class="comment comment-reply" data-comment-id="2"> <div class="comment-header"> <div class="comment-avatar">JS</div> <div class="comment-meta"> <span class="comment-author">Jane Smith</span> <span class="comment-time">1 hour ago</span> </div> </div> <div class="comment-body"> <p class="comment-content">I agree! The examples were particularly helpful.</p> </div> <div class="comment-actions"> <button class="comment-action like-btn" aria-label="Like comment"><span class="like-icon" aria-hidden="true">♥</span> <span class="like-count">5</span></button> <button class="comment-action reply-btn" aria-label="Reply to comment">Reply</button> </div> </div> </div> </div> <div class="comment comment-reply" data-comment-id="3"> <div class="comment-header"> <div class="comment-avatar">BW</div> <div class="comment-meta"> <span class="comment-author">Bob Wilson</span> <span class="comment-time">30 minutes ago</span> </div> </div> <div class="comment-body"> <p class="comment-content">Would love to see a follow-up post diving deeper into this topic.</p> </div> <div class="comment-actions"> <button class="comment-action like-btn" aria-label="Like comment"><span class="like-icon" aria-hidden="true">♥</span> <span class="like-count">3</span></button> <button class="comment-action reply-btn" aria-label="Reply to comment">Reply</button> </div> </div> </div> </div>
Comment Section Generator
Create customizable comment sections for your website
Preview
Comments (2)
This is a great article! Really helped me understand the concept better.
Would love to see a follow-up post diving deeper into this topic.