Valex - Laravel Tailwind Admin Template

Basic Alert

Holy guacamole! You should check in on some of those fields below.

<div class="alert alert-warning  fade show flex" role="alert" id="dismiss-alert1">
<div class="">
    <strong>Holy guacamole! </strong> You should check in on some of those fields
below.
</div>
<div class="ltr:pl-3 ltr:ltr:ml-auto  rtl:mr-auto">
    <div class="mx-1 my-1">
        <button type="button"
        class="inline-flex  rounded-sm text-warning focus:outline-none focus:ring-0 focus:ring-offset-0 "
        data-hs-remove-element="#dismiss-alert1">
            <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>

Live example

A new software update is available. See what's new in version 3.0.7

Details

<div class="bg-gray-50 border border-gray-200 dark:bg-light dark:border-defaultborder/10 alert mb-0"
role="alert">
<div class="flex">
    <div class="sm:flex-shrink-0">
        <svg class="h-4 w-4 text-gray-500 mt-0.5" xmlns="http://www.w3.org/2000/svg"
            width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path
                d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
        </svg>
    </div>
    <div class="flex-1 md:flex md:justify-between ltr:ml-2 rtl:mr-2">
        <p class="text-sm dark:text-defaulttextcolor/70">
            A new software update is available. See what's new in version 3.0.7
        </p>
        <p class="text-sm mt-3 md:mt-0 ltr:md:ml-6 ltr:md:mr-6">
            <a class="dark:text-defaulttextcolor/70 hover:text-gray-500 font-medium whitespace-nowrap"
                href="javascript:void(0);">Details</a>
        </p>
    </div>
</div>
</div>

Default alerts

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

<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 !border-success/10" 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>

Links in alerts

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

<div class="alert alert-primary" role="alert">
        A simple primary alert with <a href="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" class="alert-link">an example link</a>.
        Give it a click if you like.
    </div>

Solid Colored Alerts

A simple solid primary alert—check it out!

A simple solid secondary alert—check it out!

A simple solid info alert—check it out!

A simple solid warning alert—check it out!

A simple solid success alert—check it out!

A simple solid danger alert—check it out!

A simple solid light alert—check it out!

A simple solid dark alert—check it out!

<div class="alert alert-solid-primary alert-dismissible fade show flex">
        A simple solid 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 alert-dismissible fade show flex">
        A simple solid 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-info alert-dismissible fade show flex">
        A simple solid info 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 alert-dismissible fade show flex">
        A simple solid 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-success alert-dismissible fade show flex">
        A simple solid success 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 alert-dismissible fade show flex">
        A simple solid 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-solid-light alert-dismissible fade show flex">
        A simple solid light alert—check it out!
        <button type="button" class="btn-close text-default" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

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

Outline Alerts

A simple outline primary alert—check it out!

A simple outline secondary alert—check it out!

A simple outline info alert—check it out!

A simple outline warning alert—check it out!

A simple outline success alert—check it out!

A simple outline danger alert—check it out!

A simple outline light alert—check it out!

A simple outline dark alert—check it out!

<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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>

Solid Alerts With Different Shadows

A simple solid primary alert with small shadow—check it out!

A simple solid primary alert with normal shadow—check it out!

A simple solid primary alert with large shadow—check it out!

A simple solid secondary alert with small shadow—check it out!

A simple solid secondary alert with normal shadow—check it out!

A simple solid secondary alert with large shadow—check it out!

<div class="alert alert-solid-primary alert-dismissible fade show flex" role="alert"id="dismiss-alert18">
        <div class="sm:flex-shrink-0">
            A simple solid primary alert with small shadow—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert18">
                    <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-solid-primary alert-dismissible fade show flex" role="alert"
        id="dismiss-alert19">
        <div class="sm:flex-shrink-0">
            A simple solid primary alert with normal shadow—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert19">
                    <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-solid-primary alert-dismissible fade show flex" role="alert"
        id="dismiss-alert20">
        <div class="sm:flex-shrink-0">
            A simple solid primary alert with large shadow—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert20">
                    <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-solid-secondary alert-dismissible fade show flex" role="alert"
        id="dismiss-alert21">
        <div class="sm:flex-shrink-0">
            A simple solid secondary alert with small shadow—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert21">
                    <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-solid-secondary alert-dismissible fade show flex" role="alert"
        id="dismiss-alert22">
        <div class="sm:flex-shrink-0">
            A simple solid secondary alert with normal shadow—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert22">
                    <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-solid-secondary alert-dismissible fade show flex" role="alert"
        id="dismiss-alert23">
        <div class="sm:flex-shrink-0">
            A simple solid secondary alert with large shadow—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert23">
                    <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>

Default Alerts With Different Shadows

A simple primary alert with small shadow—check it out!

A simple primary alert with normal shadow—check it out!

A simple primary alert with large shadow—check it out!

A simple secondary alert with small shadow—check it out!

A simple secondary alert with normal shadow—check it out!

A simple secondary alert with large shadow—check it out!

<div class="alert alert-primary shadow-sm">A simple primary alert with small shadow—check it out!</div>

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

        <div class="alert alert-primary shadow-lg">A simple primary alert with large shadow—check it out!</div>

        <div class="alert alert-secondary shadow-sm">A simple secondary alert with small shadow—check it out!</div>

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

        <div class="alert alert-secondary shadow-lg">A simple secondary alert with large shadow—check it out!</div>

Rounded Solid Alerts

A simple solid rounded primary alert—check it out!

A simple solid rounded secondary alert—check it out!

A simple solid rounded warning alert—check it out!

A simple solid rounded danger alert—check it out!

<div class="alert alert-solid-primary !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert24">
        <div class="sm:flex-shrink-0">
            A simple solid rounded primary alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert24">
                    <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-solid-secondary !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert25">
        <div class="sm:flex-shrink-0">
            A simple solid rounded secondary alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert25">
                    <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-solid-warning !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert26">
        <div class="sm:flex-shrink-0">
            A simple solid rounded warning alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert26">
                    <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-solid-danger !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert27">
        <div class="sm:flex-shrink-0">
            A simple solid rounded danger alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert27">
                    <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>

Rounded Outline Alerts

A simple outline rounded primary alert—check it out!

A simple outline rounded secondary alert—check it out!

A simple outline rounded warning alert—check it out!

A simple outline rounded danger alert—check it out!

 <div class="alert alert-outline-primary !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert28">
        <div class="sm:flex-shrink-0">
            A simple outline rounded primary alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert28">
                    <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 !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert29">
        <div class="sm:flex-shrink-0">
            A simple outline rounded secondary alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert29">
                    <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 !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert30">
        <div class="sm:flex-shrink-0">
            A simple outline rounded warning alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert30">
                    <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 !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert31">
        <div class="sm:flex-shrink-0">
            A simple outline rounded danger alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert31">
                    <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>

Rounded Default Alerts

A simple solid rounded primary alert—check it out!

A simple rounded secondary alert—check it out!

A simple rounded warning alert—check it out!

A simple rounded danger alert—check it out!

<div class="alert alert-primary !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert32">
        <div class="sm:flex-shrink-0">
            A simple solid rounded primary alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert32">
                    <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 !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert33">
        <div class="sm:flex-shrink-0">
            A simple rounded secondary alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert33">
                    <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 !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert34">
        <div class="sm:flex-shrink-0">
            A simple rounded warning alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert34">
                    <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 !rounded-full alert-dismissible fade show flex"
        role="alert" id="dismiss-alert35">
        <div class="sm:flex-shrink-0">
            A simple rounded danger alert—check it out!
        </div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-white focus:outline-none focus:ring-0 focus:ring-offset-0 "
                    data-hs-remove-element="#dismiss-alert35">
                    <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>

Rounded Alerts With Custom Close Button

A simple rounded primary alert—check it out!

A simple rounded secondary alert—check it out!

A simple rounded warning alert—check it out!

A simple rounded danger alert—check it out!

<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  float-right rtl:float-left  text-white 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 float-right rtl:float-left text-white 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 float-right rtl:float-left text-white 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  float-right rtl:float-left rounded-sm text-white 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>

Alerts with icons

An example alert with an icon

An example success alert with an icon

An example warning alert with an icon

An example danger alert with an icon

<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>

Customized Alerts With SVG's

A customized primary alert with an icon

<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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>

Rounded Solid Colored Alerts With Image

Primary alert! You should check in on some of those fields below.

Secondary alert! You should check in on some of those fields below.

Danger alert! You should check in on some of those fields below.

Warning alert! You should check in on some of those fields below.

Info alert! You should check in on some of those fields below.

Success alert! You should check in on some of those fields below.

Light alert! You should check in on some of those fields below.

Dark alert! You should check in on some of those fields below.

<div class="bg-primary border border-primary text-white alert !rounded-full px-6" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/1.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Primary</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-secondary border border-secondary text-white alert !rounded-full px-6" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/2.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-danger border border-danger text-white alert !rounded-full px-6" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/3.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-warning border border-warning text-white alert !rounded-full px-6" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/4.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Warning</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-info  border border-info text-white alert !rounded-full px-6" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/5.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Info</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-success  border border-success text-white alert !rounded-full px-6" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/6.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Success</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-light border-light text-gray-600 alert !rounded-full px-6" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/7.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Light</span> alert! You should check in on some of those fields below.
    </div>
    <div
    class="bg-black border border-white/10 text-white alert dark:bg-gray-900 dark:text-white !rounded-full px-6"
    role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/8.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Dark</span> alert! You should check in on some of those fields below.
    </div>

Rounded Outline Alerts With Image

Primary alert! You should check in on some of those fields below.

Secondary alert! You should check in on some of those fields below.

Danger alert! You should check in on some of those fields below.

Warning alert! You should check in on some of those fields below.

info alert! You should check in on some of those fields below.

Success alert! You should check in on some of those fields below.

Light alert! You should check in on some of those fields below.

Dark alert! You should check in on some of those fields below.

<div class="bg-white dark:bg-bodybg border border-primary alert !rounded-full px-6 text-primary" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/9.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Primary</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-white dark:bg-bodybg border border-secondary alert !rounded-full px-6 text-secondary"
    role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/10.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-white dark:bg-bodybg border border-danger alert !rounded-full px-6 text-danger" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/11.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-white dark:bg-bodybg border border-warning alert !rounded-full px-6 text-warning" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/12.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Warning</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-white dark:bg-bodybg border border-info alert !rounded-full px-6 text-info" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/13.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">info</span> alert! You should check in on some of those fields below.
    </div>
    <div class="bg-white dark:bg-bodybg border border-success alert !rounded-full px-6 text-success" role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/14.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Success</span> alert! You should check in on some of those fields below.
    </div>
    <div
    class="bg-white dark:bg-bodybg border border-gray-200 dark:border-white/10 alert !rounded-full px-6 text-gray-600 dark:text-white/70"
    role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/15.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Light</span> alert! You should check in on some of those fields below.
    </div>
    <div
    class="bg-white dark:bg-bodybg border border-gray-900 alert !rounded-full px-6 text-gray-900 dark:border-gray-900 dark:text-gray-100"
    role="alert">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/16.jpg" class="avatar avatar-sm w-6 h-6 me-2 !rounded-full ring-0" alt="user-img">
    <span class="font-bold">Dark</span> alert! You should check in on some of those fields below.
    </div>

Alerts With Images

A simple primary alert with image—check it out!

A simple secondary alert with image—check it out!

A simple warning alert with image—check it out!

A simple danger alert with image—check it out!

A simple info alert with image—check it out!

A simple light alert with image—check it out!

A simple dark alert with image—check it out!

<div class="alert alert-img alert-primary alert-dismissible fase show !rounded-full flex-wrap"
        role="alert" id="dismiss-alert44">
        <div class="avatar avatar-sm me-3 avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/3.jpg" alt="img">
        </div>
        <div>A simple primary alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-secondary alert-dismissible fase show !rounded-full flex-wrap"
        role="alert" id="dismiss-alert45">
        <div class="avatar avatar-sm me-3 avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/5.jpg" alt="img">
        </div>
        <div>A simple secondary alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-warning alert-dismissible fase show !rounded-full flex-wrap"
        role="alert" id="dismiss-alert46">
        <div class="avatar avatar-sm me-3 avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/8.jpg" alt="img">
        </div>
        <div>A simple warning alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-danger alert-dismissible fase show !rounded-full flex-wrap"
        role="alert" id="dismiss-alert47">
        <div class="avatar avatar-sm me-3 avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/11.jpg" alt="img">
        </div>
        <div>A simple danger alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-info alert-dismissible fase show !rounded-full flex-wrap"
        role="alert" id="dismiss-alert48">
        <div class="avatar avatar-sm me-3 avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/13.jpg" alt="img">
        </div>
        <div>A simple info alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-light alert-dismissible fase show !rounded-full flex-wrap"
        role="alert" id="dismiss-alert49">
        <div class="avatar avatar-sm me-3 avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/10.jpg" alt="img">
        </div>
        <div>A simple light alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-dark alert-dismissible fase show !rounded-full flex-wrap"
        role="alert" id="dismiss-alert50">
        <div class="avatar avatar-sm me-3 avatar-rounded">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/15.jpg" alt="img">
        </div>
        <div>A simple dark alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>

Alerts With Different size Images

A simple primary alert with image—check it out!

A simple secondary alert with image—check it out!

A simple warning alert with image—check it out!

A simple danger alert with image—check it out!

A simple info alert with image—check it out!

<div class="alert alert-img alert-primary alert-dismissible fase show flex-wrap"
        role="alert" id="dismiss-alert51">
        <div class="avatar avatar-xs me-3">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/3.jpg" alt="img">
        </div>
        <div>A simple primary alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-secondary alert-dismissible fase show flex-wrap"
        role="alert" id="dismiss-alert52">
        <div class="avatar avatar-sm me-3">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/5.jpg" alt="img">
        </div>
        <div>A simple secondary alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-warning alert-dismissible fase show flex-wrap"
        role="alert" id="dismiss-alert53">
        <div class="avatar me-3">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/8.jpg" alt="img">
        </div>
        <div>A simple warning alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-danger alert-dismissible fase show flex-wrap"
        role="alert" id="dismiss-alert54">
        <div class="avatar avatar-md me-3">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/11.jpg" alt="img">
        </div>
        <div>A simple danger alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-info alert-dismissible fase show flex-wrap"
        role="alert" id="dismiss-alert55">
        <div class="avatar avatar-lg me-3">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/13.jpg" alt="img">
        </div>
        <div>A simple info alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>
    <div class="alert alert-img alert-dark alert-dismissible fase show flex-wrap"
        role="alert" id="dismiss-alert56">
        <div class="avatar avatar-xl me-3">
            <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/14.jpg" alt="img">
        </div>
        <div>A simple info alert with image—check it out!</div>
        <div class="pl-3 ltr:ml-auto rtl:mr-auto">
            <div class="mx-1 my-1">
                <button type="button"
                    class="inline-flex  rounded-sm text-teal-500 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>
    </div>

Information?

This alert is created to just show the related information.

Confirmed

This alert is created to just show the confirmation message.

Warning

This alert is created to just show the warning alert message.

danger

This alert is created to just show the danger alert message.

Information Alert

Information alert to show to information

cancel open

Secondary Alert

Success alert to show to success message

cancel open

Warning Alert

This alert is created to just show the warning alert message.

cancel open

Danger Alert

This alert is created to just show the danger alert message.

cancel open

Information Alert

Information alert to show to information

cancel open

Success Alert

Success alert to show to success message

Warning Alert

Warning alert to show to warning message

skip open

Danger Alert

Danger alert to show to danger message

close continue

Additional content

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

<div class="xl:col-span-6">
        <div class="alert alert-primary overflow-hidden p-0" role="alert">
            <div class="p-3 bg-primary text-white flex justify-between">
                <h6 class="aletr-heading mb-0">Thank you for reporting this.</h6>
                <button type="button" class="btn-close p-0 text-white" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
            </div>
            <hr class="my-0">
            <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 text-decoration-underline">Visit for support for queries ?</a></p>
            </div>
        </div>
    </div>

    <div class="xl:col-span-6">
        <div class="alert alert-secondary overflow-hidden p-0" role="alert">
            <div class="p-3 bg-secondary text-white flex justify-between">
                <h6 class="aletr-heading mb-0">Thank you for reporting this.</h6>
                <button type="button" class="btn-close p-0 text-white" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
            </div>
            <hr class="my-0">
            <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 text-decoration-underline">Visit for support for queries ?</a></p>
            </div>
        </div>
    </div>

    <div class="xl:col-span-6">
        <div class="alert alert-success overflow-hidden p-0" role="alert">
            <div class="p-3 bg-success text-white flex justify-between">
                <h6 class="aletr-heading mb-0">Thank you for reporting this.</h6>
                <button type="button" class="btn-close p-0 text-white" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
            </div>
            <hr class="my-0">
            <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 text-decoration-underline">Visit for support for queries ?</a></p>
            </div>
        </div>
    </div>

    <div class="xl:col-span-6">
        <div class="alert alert-warning overflow-hidden p-0" role="alert">
            <div class="p-3 bg-warning text-white flex justify-between">
                <h6 class="aletr-heading mb-0">Thank you for reporting this.</h6>
                <button type="button" class="btn-close p-0 text-white" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
            </div>
            <hr class="my-0">
            <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 text-decoration-underline">Visit for support for queries ?</a></p>
            </div>
        </div>
    </div>

Alerts With Description

Cannot connect to the database

We are unable to save any progress at this time.

Alerts With Link on Right

A new software update is available. See what's new in version 3.0.7

Details

Alerts With Actions

YouTube would like you to send notifications

Notifications may include alerts, sounds and icon badges. These can be configured in Settings.

Switcher

Notifications

Rounded Solid Colored Alerts With Image

Rounded Outline Alerts With Image

Information?

Confirmed

Warning

danger

Thank you for reporting this.

Thank you for reporting this.

Thank you for reporting this.

Thank you for reporting this.

Alerts With Description

Cannot connect to the database

Alerts With Link on Right

Alerts With Actions

YouTube would like you to send notifications

Alerts With List

A problem has been occurred while submitting your data.

Alerts With Dismissable

Alerts With Discovery

New version published

bordered Styles

Successfully updated.

Error!

Switcher

Petey Cruiser

Jimmy Changa

Graham Cracker

Donatella Nobatti

Anne Fibbiyon

New files available

Updates Available

New Order Received

New review received

22 verified registrations

Project has been approved

Petey Cruiser

Notifications

Daneil Scott

Valex Video call

Daneil Scott

Calling...

Valex Voice call

Daneil Scott

Calling...

Alerts

Rounded Solid Colored Alerts With Image

Rounded Outline Alerts With Image

Information?

Confirmed

Warning

danger

Thank you for reporting this.

Thank you for reporting this.

Thank you for reporting this.

Thank you for reporting this.

Alerts With Description

Cannot connect to the database

Alerts With Link on Right

Alerts With Actions

YouTube would like you to send notifications

Alerts With List

A problem has been occurred while submitting your data.

Alerts With Dismissable

Alerts With Discovery

New version published

bordered Styles

Successfully updated.

Error!