<div>
    <div>
        <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-500/10">
            <twig:ux:icon name="lucide:check" class="h-6 w-6 text-green-600 dark:text-green-400" />
        </div>
        <div class="mt-3 text-center sm:mt-5">
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">{{ headline }}</h3>
            <div class="mt-2">
                <p class="text-sm leading-5 text-gray-500 dark:text-gray-300">{{ text }}</p>
            </div>
        </div>
    </div>
    <div class="mt-5 sm:mt-6">
        <span class="flex w-full rounded-md shadow-sm">
            <a href="{{ href }}"
               data-turbo-frame="_top"
               class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-primary-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-primary-500 focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                {{ linkText }}
            </a>
        </span>
    </div>
</div>
