User Comment Card

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* A container to layout the comments list */
.comment-thread-container {
    background-color: #ffffff;
    max-width: 720px;
    margin: 2rem auto; /* Centers the list */
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    display: grid;
    gap: 1.25rem;
}

/* === User Comment Card Styles === */
.uc-card-wrapper {
    /* Each wrapper contains the card and its potential replies */
    display: grid;
    gap: 1.25rem;
}

.uc-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.uc-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.uc-card-main {
    flex-grow: 1;
}

.uc-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap; /* Allows timestamp to wrap on small screens */
}

.uc-card-author {
    font-weight: 600;
    color: #111827;
}

.uc-card-time {
    font-size: 0.875rem;
    color: #6b7280;
}

/* "Replying to" element for nested comments */
.uc-card-reply-context {
    font-size: 0.875rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.uc-card-reply-context svg {
    width: 16px;
    height: 16px;
}
.uc-card-reply-context strong {
    font-weight: 600;
    color: #4f46e5;
}

.uc-card-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
    margin: 0 0 0.5rem;
}

.uc-card-actions {
    display: flex;
    gap: 1.25rem;
}

.uc-card-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    transition: color 0.2s ease-in-out;
}
.uc-card-action-btn:hover {
    color: #111827;
}
.uc-card-action-btn svg {
    width: 20px;
    height: 20px;
}

/* Container for indented replies */
.uc-card-replies {
    /* This handles the indentation for a block of replies */
    margin-left: 3.5rem; /* The width of avatar + gap */
    display: grid;
    gap: 1.25rem;
}
</style>

<div class="comment-thread-container">

<div class="uc-card-wrapper">
        
        <article class="uc-card">
            <img src="https://placehold.co/88x88/f59e0b/ffffff/png?text=F" alt="Avatar of Felix Quinn" class="uc-card-avatar">
            <div class="uc-card-main">
                <header class="uc-card-header"><span class="uc-card-author">Felix Quinn</span><time class="uc-card-time" datetime="2023-10-27T10:30:00">&bull; 1hr ago</time></header>
                <p class="uc-card-text">This is an excellent breakdown. The point about accessible star ratings is particularly important and often overlooked. Great work!</p>
                <footer class="uc-card-actions"><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Like</button><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 17V15.8C20 14.1198 20 13.2798 19.673 12.638C19.3854 12.0735 18.9265 11.6146 18.362 11.327C17.7202 11 16.8802 11 15.2 11H4M4 11L8 7M4 11L8 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Reply</button></footer>
            </div>
        </article>

<div class="uc-card-replies">
            <article class="uc-card">
                <img src="https://placehold.co/88x88/1d4ed8/ffffff/png?text=N" alt="Avatar of Nora Ives" class="uc-card-avatar">
                <div class="uc-card-main">
                    <header class="uc-card-header"><span class="uc-card-author">Nora Ives</span><time class="uc-card-time" datetime="2023-10-27T10:38:00">&bull; 52m ago</time></header>
                    <div class="uc-card-reply-context">
                         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 17V15.8C20 14.1198 20 13.2798 19.673 12.638C19.3854 12.0735 18.9265 11.6146 18.362 11.327C17.7202 11 16.8802 11 15.2 11H4M4 11L8 7M4 11L8 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                         Replying to <strong>@felixquinn</strong>
                    </div>
                    <p class="uc-card-text">Couldn't agree more. I've been advocating for this approach for years. It's great to see a practical template that other developers can use right away.</p>
                    <footer class="uc-card-actions"><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Like</button><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 17V15.8C20 14.1198 20 13.2798 19.673 12.638C19.3854 12.0735 18.9265 11.6146 18.362 11.327C17.7202 11 16.8802 11 15.2 11H4M4 11L8 7M4 11L8 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Reply</button></footer>
                </div>
            </article>
        </div>
    </div>

<div class="uc-card-wrapper">
        <article class="uc-card">
            <img src="https://placehold.co/88x88/65a30d/ffffff/png?text=A" alt="Avatar of Alex Rivera" class="uc-card-avatar">
            <div class="uc-card-main">
                <header class="uc-card-header"><span class="uc-card-author">Alex Rivera</span><time class="uc-card-time" datetime="2023-10-27T11:05:00">&bull; 25m ago</time></header>
                <p class="uc-card-text">Just implemented this on my blog's new theme. Dropped in perfectly. This saved me at least a couple of hours.</p>
                 <footer class="uc-card-actions"><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Like</button><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 17V15.8C20 14.1198 20 13.2798 19.673 12.638C19.3854 12.0735 18.9265 11.6146 18.362 11.327C17.7202 11 16.8802 11 15.2 11H4M4 11L8 7M4 11L8 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Reply</button></footer>
            </div>
        </article>
    </div>

</div>