Comment List - Free UI Component Template

Text Color #1e293b

Accent Color #f97316

Background Color #ffffff

Font Size (rem) 1

Max Width (px) 750

Comment List

A complex threaded comment list supporting nested replies, social action links, and hierarchical depth indicators.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment List</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --text-color: {{textColor}};
            --accent-color: {{accentColor}};
            --bg-color: {{bgColor}};
            --page-bg: #fff7ed; /* Default vibrant light orange */
            --font-size: {{fontSize}}rem;
            --list-width: {{listWidth}}px;
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--page-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem;
            color: var(--text-color);
        }

.comment-container {
            width: 100%;
            max-width: var(--list-width);
            background: var(--bg-color);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 15px 35px rgba(249, 115, 22, 0.08);
            font-size: var(--font-size);
        }

.comment-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

.comment-item {
            display: flex;
            gap: 1.25rem;
        }

.user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e2e8f0;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85em;
        }

.comment-body { flex: 1; }

.comment-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
        }
        .user-name { font-weight: 800; font-size: 0.95em; }
        .time-ago { font-size: 0.8em; color: #94a3b8; font-weight: 600; }

.comment-text {
            line-height: 1.6;
            color: var(--text-color);
            opacity: 0.8;
            font-size: 0.95em;
            margin-bottom: 0.75rem;
        }

.comment-actions {
            display: flex;
            gap: 1.5rem;
            font-size: 0.8em;
            font-weight: 700;
            color: #64748b;
        }
        .action-link { cursor: pointer; transition: color 0.2s ease; }
        .action-link:hover { color: var(--accent-color); }
        .action-link.active { color: var(--accent-color); }

.replies {
            margin-top: 1.5rem;
            padding-left: 1.25rem;
            border-left: 2px solid #f1f5f9;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

</style>
</head>
<body style="--accent-rgb: 249, 115, 22;">

<div class="comment-container">
        <ul class="comment-list">
            <li class="comment-item">
                <div class="user-avatar" style="background: #ffedd5; color: #9a3412;">AV</div>
                <div class="comment-body">
                    <div class="comment-header">
                        <span class="user-name">Alexander Vaughn</span>
                        <span class="time-ago">2 hours ago</span>
                    </div>
                    <p class="comment-text">The new layout variants look absolutely stunning. The attention to detail on the typography and spacing makes a huge difference in the overall premium feel.</p>
                    <div class="comment-actions">
                        <span class="action-link active">Like (12)</span>
                        <span class="action-link">Reply</span>
                        <span class="action-link">Share</span>
                    </div>

<div class="replies">
                        <div class="comment-item">
                            <div class="user-avatar" style="background: #f0f9ff; color: #075985;">ER</div>
                            <div class="comment-body">
                                <div class="comment-header">
                                    <span class="user-name">Elena Rodriguez</span>
                                    <span class="time-ago">45 minutes ago</span>
                                </div>
                                <p class="comment-text">Totally agree! The range sliders for width controls were a great addition to the generator UX.</p>
                                <div class="comment-actions">
                                    <span class="action-link">Like</span>
                                    <span class="action-link">Reply</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="comment-item">
                <div class="user-avatar">SC</div>
                <div class="comment-body">
                    <div class="comment-header">
                        <span class="user-name">Sophia Chen</span>
                        <span class="time-ago">Yesterday</span>
                    </div>
                    <p class="comment-text">Is there a plan to add a Dark Mode variant for these list components soon?</p>
                    <div class="comment-actions">
                        <span class="action-link">Like (2)</span>
                        <span class="action-link">Reply</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</body>
</html>