<div class="mt-4 mb-4 w-full grid grid-cols-1 md:grid-cols-3 2xl:grid-cols-4 gap-4" hx-get="{{ refresh_url }}"
    hx-target="this" hx-swap="outerHTML" hx-trigger="refreshStats from:body">
    {% for stat in stats %}
    <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
        <div class="flex items-center">
            <div class="flex-shrink-0">
                <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{
                    stat.value }}</span>
                <h3 class="text-base font-normal text-gray-500">{{ stat.text }}</h3>
            </div>
        </div>
    </div>
    {% endfor %}
</div>