<div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6 border border-gray-100">
    <dt>
        <div class="absolute rounded-md bg-sky-500 p-3">
            <svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/>
            </svg>
        </div>
        <p class="ml-16 truncate text-sm font-medium text-gray-500">{{ __('Customers') }}</p>
    </dt>

    <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
        <p class="text-2xl font-semibold text-gray-900">
            {{ Number::abbreviate($customers) }}
        </p>
        <div class="absolute inset-x-0 bottom-0 bg-gray-100 px-4 py-4 sm:px-6">
            <div class="text-sm">
                <a href="{{ route('daylight.store.customers.index') }}" class="font-medium text-sky-600 hover:text-sky-500">View all</a>
            </div>
        </div>
    </dd>
</div>