Comment Section Generator

<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>