<div class="max-w-[668px]">
    {% for item in comments %}
    <div class="relative grid grid-cols-[60px_auto] items-center my-4">
        <div class="h-10 w-10 rounded-full mr-4">
            <div class="rounded-full outline outline-2 outline-offset-2 outline-blue-100 w-10 h-10">
                <div style="background: #e5e5e5" class="w-10 h-10 rounded-full flex items-center justify-center">
                    <span class="text-lg uppercase">{{item.author_name|first}}</span>
                </div>
            </div>
        </div>
        <div>
            <div class="text-sm leading-tight font-semibold text-primary block">
                {{ item.author_name}}
                <span class="text-xs text-slate-500 font-normal inline">{{item.created_at}}</span>
            </div>
            <div>
                {{item.message|raw}}
            </div>
        </div>
    </div>
    {% endfor %}
</div>