JSFiddle - React, Tailwind, and code Playground

by Zsanett Tamás

HTML

{% for item in users %}
        {% if loop.index % 6 == 1 or loop.index == 1 %}
            <div class="row text-center progress-cards-row">
        {% endif %}
        <div class="col-2">
            <div class="card mb-4">
                <div class="card-header">{{ item.user.name }}</div>
                <div class="card-body">
                    <h5 class="card-title">{{ item.packed }}</h5>
                    <p class="card-text">{{ item.notPacked }}</p>
                </div>
            </div>
        </div>
        {% if loop.index % 6 == 0 %}
            </div>
        {% endif %}

    {% endfor %}