{{-- Card total users --}}
<div class="max-w-3xl mx-auto sm:px-6 lg:px-6">
    <div
        class="rounded-md shadow-lg border border-purple-600 bg-white dark:bg-gray-800 hover:-translate-y-1 hover:scale-110 hover:bg-gray-50 transition ease-in-out delay-50 dark:hover:bg-gray-600 overflow-hidden">
        <div class="p-6 text-center text-gray-900 dark:text-gray-100">
            <div class="flex items-center space-x-3">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-8 h-8 text-purple-600">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
                </svg>
                <div class="p-1">
                    {{ count($members) }}
                </div>
                <div class="p-1">
                    {{ __('Member(s)') }}
                </div>
            </div>
        </div>
    </div>
</div>