A simple alert Laravel Blade component that is styled with Tailwind and uses Alpine for the dismissal

alert.blade.php

<div {{ $attributes }} x-data="{ visible: true }" x-show="visible" x-cloak>
    <div class="relative w-full overflow-hidden rounded-xl border border-red-600 bg-white text-slate-700 dark:bg-slate-900 dark:text-slate-300"
        role="alert">
        <div class="flex w-full items-center gap-2 bg-red-600/10 p-4">
            <div class="rounded-full bg-red-600/15 p-1 text-red-600" aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
                    aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-2">
                @if (blank($title))
                    <h3 class="text-sm font-semibold text-red-600">{{ $slot }}</h3>
                @else
                    <h3 class="text-sm font-semibold text-red-600">{{ $title }}</h3>
                    <p class="text-xs font-medium sm:text-sm">{{ $slot }}</p>
                @endif
            </div>
            <button x-on:click="visible = false" class="ml-auto" aria-label="dismiss alert">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
                    fill="none" stroke-width="2.5" class="h-4 w-4 shrink-0">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    </div>
</div>