<div>
    <div>
        <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-500/10">
            <twig:ux:icon name="lucide:triangle-alert" class="h-6 w-6 text-red-600 dark:text-red-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>
    {% if href|default %}
        <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>
    {% endif %}
</div>
