Alerts

<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>

<div class="alert alert-secondary" role="alert">
    A simple secondary alert—check it out!
</div>

<div class="alert alert-success" role="alert">
    A simple success alert—check it out!
</div>

<div class="alert alert-danger" role="alert">
    A simple danger alert—check it out!
</div>

<div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
</div>

<div class="alert alert-info" role="alert">
    A simple info alert—check it out!
</div>

<div class="alert alert-light" role="alert">
    A simple light alert—check it out!
</div>

<div class="alert alert-dark" role="alert">
    A simple dark alert—check it out!
</div>

<div class="alert alert-primary" role="alert">
    A simple primary alert with <a href="javascript:void(0);" class="alert-link">an example
        link</a>.
    Give it a click if you like.
</div>

<div class="alert alert-secondary" role="alert">
    A simple secondary alert with <a href="javascript:void(0);" class="alert-link">an example
        link</a>. Give it a click if you like.
</div>

<div class="alert alert-success" role="alert">
    A simple success alert with <a href="javascript:void(0);" class="alert-link">an example
        link</a>.
    Give it a click if you like.
</div>

<div class="alert alert-danger" role="alert">
    A simple danger alert with <a href="javascript:void(0);" class="alert-link">an example
        link</a>.
    Give it a click if you like.
</div>

<div class="alert alert-warning" role="alert">
    A simple warning alert with <a href="javascript:void(0);" class="alert-link">an example
        link</a>.
    Give it a click if you like.
</div>

<div class="alert alert-info" role="alert">
    A simple info alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
    Give it a click if you like.
</div>

<div class="alert alert-light" role="alert">
    A simple light alert with <a href="javascript:void(0);" class="alert-link">an example
        link</a>.
    Give it a click if you like.
</div>

<div class="alert alert-dark" role="alert">
    A simple dark alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
    Give it a click if you like.
</div>

    <div class="alert alert-solid-primary alert-dismissible fade show flex" role="alert" id="dismiss-alert2">
    <div class="sm:flex-shrink-0"> A simple solid primary alert—check it out!</div>
    <div class="ms-auto">
        <div class="mx-1 my-1">
            <button type="button" class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0" data-hs-remove-element="#dismiss-alert2">
                <span class="sr-only">Dismiss</span>
                <i class="bi bi-x text-xl leading-none"></i>
            </button>
        </div>
    </div>
</div>
<div class="alert alert-solid-secondary alert-dismissible fade show flex" role="alert" id="dismiss-alert6">
    <div class="sm:flex-shrink-0"> A simple solid primary alert—check it out!</div>
    <div class="ms-auto">
        <div class="mx-1 my-1">
            <button type="button" class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0" data-hs-remove-element="#dismiss-alert6">
                <span class="sr-only">Dismiss</span>
                <i class="bi bi-x text-xl leading-none"></i>
            </button>
        </div>
    </div>
</div>
<div class="alert alert-solid-info alert-dismissible fade show flex" role="alert" id="dismiss-alert7">
    <div class="sm:flex-shrink-0"> A simple solid primary alert—check it out!</div>
    <div class="ms-auto">
        <div class="mx-1 my-1">
            <button type="button" class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0" data-hs-remove-element="#dismiss-alert7">
                <span class="sr-only">Dismiss</span>
                <i class="bi bi-x text-xl leading-none"></i>
            </button>
        </div>
    </div>
</div>
<div class="alert alert-solid-warning alert-dismissible fade show flex" role="alert" id="dismiss-alert8">
    <div class="sm:flex-shrink-0"> A simple solid primary alert—check it out!</div>
    <div class="ms-auto">
        <div class="mx-1 my-1">
            <button type="button" class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0" data-hs-remove-element="#dismiss-alert8">
                <span class="sr-only">Dismiss</span>
                <i class="bi bi-x text-xl leading-none"></i>
            </button>
        </div>
    </div>
</div>
<div class="alert alert-solid-success alert-dismissible fade show flex" role="alert" id="dismiss-alert9">
    <div class="sm:flex-shrink-0"> A simple solid primary alert—check it out!</div>
    <div class="ms-auto">
        <div class="mx-1 my-1">
            <button type="button" class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0" data-hs-remove-element="#dismiss-alert9">
                <span class="sr-only">Dismiss</span>
                <i class="bi bi-x text-xl leading-none"></i>
            </button>
        </div>
    </div>
</div>
<div class="alert alert-solid-danger alert-dismissible fade show flex" role="alert" id="dismiss-alert10">
    <div class="sm:flex-shrink-0"> A simple solid primary alert—check it out!</div>
    <div class="ms-auto">
        <div class="mx-1 my-1">
            <button type="button" class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0" data-hs-remove-element="#dismiss-alert10">
                <span class="sr-only">Dismiss</span>
                <i class="bi bi-x text-xl leading-none"></i>
            </button>
        </div>
    </div>
</div>
<div class="alert alert-solid-light alert-dismissible fade show flex" role="alert" id="dismiss-alert11">
    <div class="sm:flex-shrink-0"> A simple solid primary alert—check it out!</div>
    <div class="ms-auto">
        <div class="mx-1 my-1">
            <button type="button" class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0" data-hs-remove-element="#dismiss-alert11">
                <span class="sr-only">Dismiss</span>
                <i class="bi bi-x text-xl leading-none"></i>
            </button>
        </div>
    </div>
</div>
<div class="alert alert-solid-dark alert-dismissible fade show flex" role="alert" id="dismiss-alert12">
    <div class="sm:flex-shrink-0"> A simple solid primary alert—check it out!</div>
    <div class="ms-auto">
        <div class="mx-1 my-1">
            <button type="button" class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0" data-hs-remove-element="#dismiss-alert12">
                <span class="sr-only">Dismiss</span>
                <i class="bi bi-x text-xl leading-none"></i>
            </button>
        </div>
    </div>
</div>    

<div class="alert alert-solid-primary rounded-full alert-dismissible fade show">
    A simple solid rounded primary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-secondary rounded-full alert-dismissible fade show">
    A simple solid rounded secondary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-warning rounded-full alert-dismissible fade show">
    A simple solid rounded warning alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-danger rounded-full alert-dismissible fade show">
    A simple solid rounded danger alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-outline-primary alert-dismissible fade show flex" role="alert"
id="dismiss-alert10">
<div class="sm:flex-shrink-0">
    A simple outline primary alert—check it out!
</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert10">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>
<div class="alert alert-outline-secondary alert-dismissible fade show flex" role="alert"
id="dismiss-alert11">
<div class="sm:flex-shrink-0">
    A simple outline secondary alert—check it out!
</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert11">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>
<div class="alert alert-outline-info alert-dismissible fade show flex" role="alert"
id="dismiss-alert12">
<div class="sm:flex-shrink-0">
    A simple outline info alert—check it out!
</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert12">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>
<div class="alert alert-outline-warning alert-dismissible fade show flex" role="alert"
id="dismiss-alert13">
<div class="sm:flex-shrink-0">
    A simple outline warning alert—check it out!
</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert13">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>
<div class="alert alert-outline-success alert-dismissible fade show flex" role="alert"
id="dismiss-alert14">
<div class="sm:flex-shrink-0">
    A simple outline success alert—check it out!
</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert14">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>
<div class="alert alert-outline-danger alert-dismissible fade show flex" role="alert"
id="dismiss-alert15">
<div class="sm:flex-shrink-0">
    A simple outline danger alert—check it out!
</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert15">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>
<div class="alert alert-outline-light alert-dismissible fade show flex" role="alert"
id="dismiss-alert16">
<div class="sm:flex-shrink-0">
    A simple outline light alert—check it out!
</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert16">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>
<div class="alert alert-outline-dark alert-dismissible fade show flex" role="alert"
id="dismiss-alert17">
<div class="sm:flex-shrink-0">
    A simple outline dark alert—check it out!
</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert17">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>

<div class="alert alert-primary !rounded-full alert-dismissible fade show"
id="dismiss-alert36">
A simple rounded primary alert—check it out!
<button type="button"
    class="inline-flex  ltr:float-right rtl:float-left   focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert36">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none"
        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-secondary !rounded-full alert-dismissible fade show"
id="dismiss-alert37">
A simple rounded secondary alert—check it out!
<button type="button"
    class="inline-flex  rounded-sm ltr:float-right rtl:float-left  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert37">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none"
        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-warning !rounded-full alert-dismissible fade show"
id="dismiss-alert38">
A simple rounded warning alert—check it out!
<button type="button"
    class="inline-flex  rounded-sm ltr:float-right rtl:float-left  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert38">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none"
        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-danger !rounded-full alert-dismissible fade show"
id="dismiss-alert39">
A simple rounded danger alert—check it out!
<button type="button"
    class="inline-flex  ltr:float-right rtl:float-left rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert39">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none"
        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>

<div class="alert alert-primary alert-dismissible dark:!bg-bodybg fade show custom-alert-icon shadow-sm flex items-center"
role="alert" id="dismiss-alert40">
<div>
    <svg class="svg-primary me-1" xmlns="http://www.w3.org/2000/svg" height="1.5rem"
        viewBox="0 0 24 24" width="1.5rem" fill="#000000">
        <path d="M0 0h24v24H0z" fill="none" />
        <path
            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
    </svg>
</div>
<div>A customized primary alert with an icon</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert40">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>
<div class="alert alert-secondary alert-dismissible fade show custom-alert-icon shadow-sm flex items-center"
role="alert" id="dismiss-alert41">
<div>
    <svg class="fill-secondary me-1" xmlns="http://www.w3.org/2000/svg"
        height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
        <path d="M0 0h24v24H0z" fill="none" />
        <path
            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
    </svg>
</div>
<div>A customized primary alert with an icon</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert41">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>
<div class="alert alert-warning alert-dismissible fade show custom-alert-icon shadow-sm flex items-center"
role="alert" id="dismiss-alert42">
<div>
    <svg class="fill-warning me-1" xmlns="http://www.w3.org/2000/svg"
        height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
    </svg>
</div>
<div>A customized primary alert with an icon</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert42">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>
<div class="alert alert-danger alert-dismissible fade show custom-alert-icon shadow-sm flex items-center"
role="alert" id="dismiss-alert43">
<div>
    <svg class="fill-danger me-1" xmlns="http://www.w3.org/2000/svg" height="1.5rem"
        viewBox="0 0 24 24" width="1.5rem" fill="#000000">
        <path d="M0 0h24v24H0z" fill="none" />
        <path
            d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z" />
    </svg>
</div>
<div>A customized primary alert with an icon</div>
<div class="ms-auto">
    <div class="mx-1 my-1">
        <button type="button"
            class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
            data-hs-remove-element="#dismiss-alert43">
            <span class="sr-only">Dismiss</span>
            <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                    fill="currentColor" />
            </svg>
        </button>
    </div>
</div>
</div>

<div class="alert alert-primary flex items-center" role="alert">
    <svg class="sm:flex-shrink-0 me-2 svg-primary" xmlns="http://www.w3.org/2000/svg"
        height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
        <path d="M0 0h24v24H0V0z" fill="none" />
        <path
            d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
    </svg>
    <div>
        An example alert with an icon
    </div>
</div>
<div class="alert alert-success !border-success/10 flex items-center" role="alert">
    <svg class="sm:flex-shrink-0 me-2 fill-success" xmlns="http://www.w3.org/2000/svg"
        height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
        <path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
        <path
            d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
    </svg>
    <div>
        An example success alert with an icon
    </div>
</div>
<div class="alert alert-warning flex items-center" role="alert">
    <svg class="sm:flex-shrink-0 me-2 fill-warning" xmlns="http://www.w3.org/2000/svg"
        enable-background="new 0 0 24 24" height="1.5rem" viewBox="0 0 24 24"
        width="1.5rem" fill="#000000">
        <g>
            <rect fill="none" height="24" width="24" />
        </g>
        <g>
            <g>
                <g>
                    <path d="M12,5.99L19.53,19H4.47L12,5.99 M12,2L1,21h22L12,2L12,2z" />
                    <polygon points="13,16 11,16 11,18 13,18" />
                    <polygon points="13,10 11,10 11,15 13,15" />
                </g>
            </g>
        </g>
    </svg>
    <div>
        An example warning alert with an icon
    </div>
</div>
<div class="alert alert-danger flex items-center" role="alert">
    <svg class="sm:flex-shrink-0 me-2 fill-danger" xmlns="http://www.w3.org/2000/svg"
        enable-background="new 0 0 24 24" height="1.5rem" viewBox="0 0 24 24"
        width="1.5rem" fill="#000000">
        <g>
            <rect fill="none" height="24" width="24" />
        </g>
        <g>
            <g>
                <g>
                    <path
                        d="M15.73,3H8.27L3,8.27v7.46L8.27,21h7.46L21,15.73V8.27L15.73,3z M19,14.9L14.9,19H9.1L5,14.9V9.1L9.1,5h5.8L19,9.1V14.9z" />
                    <rect height="6" width="2" x="11" y="7" />
                    <rect height="2" width="2" x="11" y="15" />
                </g>
            </g>
        </g>
    </svg>
    <div>
        An example danger alert with an icon
    </div>
</div>

<div class="alert alert-img alert-primary alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert44">
<div class="avatar avatar-sm me-3 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/3.jpg" alt="img">
</div>
<div>A simple primary alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0 inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert44">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-secondary alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert45">
<div class="avatar avatar-sm me-3 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/5.jpg" alt="img">
</div>
<div>A simple secondary alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0 inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert45">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-warning alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert46">
<div class="avatar avatar-sm me-3 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/8.jpg" alt="img">
</div>
<div>A simple warning alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0 inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert46">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-danger alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert47">
<div class="avatar avatar-sm me-3 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/11.jpg" alt="img">
</div>
<div>A simple danger alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0 inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert47">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-info alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert48">
<div class="avatar avatar-sm me-3 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/13.jpg" alt="img">
</div>
<div>A simple info alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0 inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert48">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-light alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert49">
<div class="avatar avatar-sm me-3 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/10.jpg" alt="img">
</div>
<div>A simple light alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0 inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert49">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-dark alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert50">
<div class="avatar avatar-sm me-3 avatar-rounded">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/15.jpg" alt="img">
</div>
<div>A simple dark alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0 inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert50">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>

<div class="alert alert-img alert-primary alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert51">
<div class="avatar avatar-xs me-3">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/3.jpg" alt="img">
</div>
<div>A simple primary alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0  inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert51">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-secondary alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert52">
<div class="avatar avatar-sm me-3">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/5.jpg" alt="img">
</div>
<div>A simple secondary alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0  inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert52">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-warning alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert53">
<div class="avatar me-3">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/8.jpg" alt="img">
</div>
<div>A simple warning alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0  inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert53">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-danger alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert54">
<div class="avatar avatar-md me-3">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/11.jpg" alt="img">
</div>
<div>A simple danger alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0  inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert54">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-info alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert55">
<div class="avatar avatar-lg me-3">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/13.jpg" alt="img">
</div>
<div>A simple info alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0  inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert55">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>
<div class="alert alert-img alert-dark alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert56">
<div class="avatar avatar-xl me-3">
    <img src="https://laravelui.spruko.com/tailwind/zynix/build/assets/images/faces/14.jpg" alt="img">
</div>
<div>A simple info alert with image—check it out!</div>
<button type="button"
    class="m-2 p-3 absolute end-0 top-0  inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
    data-hs-remove-element="#dismiss-alert56">
    <span class="sr-only">Dismiss</span>
    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
        fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path
            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
            fill="currentColor" />
    </svg>
</button>
</div>

<div class="grid grid-cols-12 gap-4">
    <div class="xxl:col-span-6 col-span-12">
        <div class="alert alert-primary overflow-hidden !p-0" role="alert"
            id="dismiss-alert65">
            <div class="p-4 bg-primary text-white flex justify-between">
                <h6 class="aletr-heading mb-0 text-[1rem]">Thank you for reporting this.
                </h6>
                <button type="button"
                    class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert65">
                    <span class="sr-only">Dismiss</span>
                    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                        fill="none" xmlns="http://www.w3.org/2000/svg"
                        aria-hidden="true">
                        <path
                            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                            fill="currentColor" />
                    </svg>
                </button>
            </div>

            <div class="p-3">
                <p class="mb-0">We appreciate you to let us know the bug in the template
                    and for warning us about future consequences <a
                        href="javascript:void(0);"
                        class="font-semibold underline text-defaulttextcolor">Visit for
                        support
                        for queries ?</a></p>
            </div>
        </div>
    </div>
    <div class="xxl:col-span-6  col-span-12">
        <div class="alert alert-secondary overflow-hidden !p-0" role="alert"
            id="dismiss-alert66">
            <div class="p-4 bg-secondary text-white flex justify-between">
                <h6 class="aletr-heading mb-0 text-[1rem]">Thank you for reporting this.
                </h6>
                <button type="button"
                    class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert66">
                    <span class="sr-only">Dismiss</span>
                    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                        fill="none" xmlns="http://www.w3.org/2000/svg"
                        aria-hidden="true">
                        <path
                            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                            fill="currentColor" />
                    </svg>
                </button>
            </div>

            <div class="p-3">
                <p class="mb-0">We appreciate you to let us know the bug in the template
                    and for warning us about future consequences <a
                        href="javascript:void(0);"
                        class="font-semibold underline text-defaulttextcolor">Visit for
                        support
                        for queries ?</a></p>
            </div>
        </div>
    </div>
    <div class="xxl:col-span-6 col-span-12">
        <div class="alert alert-success !border-success/10 overflow-hidden !p-0"
            role="alert" id="dismiss-alert67">
            <div class="p-4 bg-success text-white flex justify-between">
                <h6 class="aletr-heading mb-0 text-[1rem]">Thank you for reporting this.
                </h6>
                <button type="button"
                    class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert67">
                    <span class="sr-only">Dismiss</span>
                    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                        fill="none" xmlns="http://www.w3.org/2000/svg"
                        aria-hidden="true">
                        <path
                            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                            fill="currentColor" />
                    </svg>
                </button>
            </div>

            <div class="p-3">
                <p class="mb-0">We appreciate you to let us know the bug in the template
                    and for warning us about future consequences <a
                        href="javascript:void(0);"
                        class="font-semibold underline text-defaulttextcolor">Visit for
                        support
                        for queries ?</a></p>
            </div>
        </div>
    </div>
    <div class="xxl:col-span-6  col-span-12">
        <div class="alert alert-warning overflow-hidden !p-0" role="alert"
            id="dismiss-alert68">
            <div class="p-4 bg-warning text-white flex justify-between">
                <h6 class="aletr-heading mb-0 text-[1rem]">Thank you for reporting this.
                </h6>
                <button type="button"
                    class="inline-flex  rounded-sm  focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert68">
                    <span class="sr-only">Dismiss</span>
                    <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
                        fill="none" xmlns="http://www.w3.org/2000/svg"
                        aria-hidden="true">
                        <path
                            d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
                            fill="currentColor" />
                    </svg>
                </button>
            </div>

            <div class="p-3">
                <p class="mb-0">We appreciate you to let us know the bug in the template
                    and for warning us about future consequences <a
                        href="javascript:void(0);"
                        class="font-semibold underline text-defaulttextcolor">Visit for
                        support
                        for queries ?</a></p>
            </div>
        </div>
    </div>
</div>