UI Alerts | Dreams AI Agent - Agent Builder Tailwind Admin Template

Basic Alerts

This is a simple alert




<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">

    <div role="alert" class="p-4 font-medium bg-primary rounded-lg text-white mb-3">
        This is a simple alert
    </div>

    <div role="alert" class="p-4 font-medium bg-dark rounded-lg text-white mb-3">
        This is a simple alert
    </div>

    <div role="alert" class="p-4 font-medium bg-warning rounded-lg text-white mb-3">
        This is a simple alert
    </div>

    <div role="alert" class="p-4 font-medium bg-info rounded-lg text-white mb-3">
        This is a simple alert
    </div>

    <div role="alert" class="p-4 font-medium bg-success rounded-lg text-white mb-3">
        This is a simple alert
    </div>

    <div role="alert" class="p-4 font-medium bg-danger rounded-lg text-white">
        This is a simple alert
    </div>

</div>

Ghost Alerts

This is a simple primary alert

This is a simple light alert

This is a simple warning alert

This is a simple info alert

This is a simple success alert

This is a simple error alert




<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">

    <div role="alert" class="p-4 font-medium bg-primary-50 rounded-lg text-primary mb-3">
        This is a simple primary alert
    </div>

    <div role="alert" class="p-4 font-medium bg-gray-50 rounded-lg text-dark mb-3">
        This is a simple light alert
    </div>

    <div role="alert" class="p-4 font-medium bg-warning-50 rounded-lg text-warning mb-3">
        This is a simple warning alert
    </div>

    <div role="alert" class="p-4 font-medium bg-info-50 rounded-lg text-info mb-3">
        This is a simple info alert
    </div>

    <div role="alert" class="p-4 font-medium bg-success-50 rounded-lg text-success mb-3">
        This is a simple success alert
    </div>

    <div role="alert" class="p-4 font-medium bg-danger-50 rounded-lg text-danger">
        This is a simple error alert
    </div>

</div>

Outline Alerts

This is a simple primary alert

This is a simple dark alert

This is a simple warning alert

This is a simple info alert

This is a simple success alert

This is a simple error alert


    
 <div class="border-dashed border-primary border px-4.5 py-5 rounded-md">

    <div role="alert" class="p-4 font-medium border border-primary rounded-lg text-primary mb-3">
        This is a simple primary alert
    </div>

    <div role="alert" class="p-4 font-medium border border-border-color rounded-lg text-dark mb-3">
        This is a simple dark alert
    </div>

    <div role="alert" class="p-4 font-medium border border-warning rounded-lg text-warning mb-3">
        This is a simple warning alert
    </div>

    <div role="alert" class="p-4 font-medium border border-info rounded-lg text-info mb-3">
        This is a simple info alert
    </div>

    <div role="alert" class="p-4 font-medium border border-success rounded-lg text-success mb-3">
        This is a simple success alert
    </div>

    <div role="alert" class="p-4 font-medium border border-danger rounded-lg text-danger">
        This is a simple error  alert
    </div>

</div>

Alerts with Icons

This is a primary alert

This is a light alert

This is a warning alert

This is a info alert

This is a success alert

This is a error alert



<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">

    <div role="alert" class="flex items-center p-4 font-medium bg-primary-50 rounded-lg text-primary mb-3">
        <i class="icon icon-info me-1"></i>This is a primary alert
    </div>

    <div role="alert" class="flex items-center p-4 font-medium bg-gray-50 rounded-lg text-dark mb-3">
        <i class="icon icon-copy-check me-1"></i>This is a light alert
    </div>

    <div role="alert" class="flex items-center p-4 font-medium bg-warning-50 rounded-lg text-warning mb-3">
        <i class="icon icon-triangle-alert me-1"></i>This is a  warning alert
    </div>

    <div role="alert" class="flex items-center p-4 font-medium bg-info-50 rounded-lg text-info mb-3">
        <i class="icon icon-badge-info me-1"></i>This is a info alert
    </div>

    <div role="alert" class="flex items-center p-4 font-medium bg-success-50 rounded-lg text-success mb-3">
        <i class="icon icon-badge-check me-1"></i>This is a success alert
    </div>

    <div role="alert" class="flex items-center p-4 font-medium bg-danger-50 rounded-lg text-danger">
        <i class="icon icon-octagon-alert me-1"></i>This is a error alert
    </div>

</div>

Alert with List

There were 2 errors with your submission

Your password must be at least 8 characters
Your password must include at least one special Character



<div class="p-4 bg-danger-50 rounded-lg">
    <p class="text-danger flex items-center font-medium mb-2.5">
        <i class="icon icon-octagon-alert me-1"></i>
        There were 2 errors with your submission
    </p> 
    <ul>
        <li class="text-danger">Your password must be at least 8 characters</li>
        <li class="text-danger">Your password must include at least one special Character</li>
    </ul>
</div>

Alert with Actions

There were 2 success with your submission

Your password must be at least 8 characters
Your password must include at least one special Character



<div class="p-4 bg-success-50 rounded-lg">
    <p class="text-success flex items-center font-medium mb-2.5">
    <i class="icon icon-octagon-alert me-1"></i>
        There were 2 success with your submission
    </p> 
    <ul>
        <li class="text-success">Your password must be at least 8 characters</li>
        <li class="text-success">Your password must include at least one special Character</li>
    </ul>
</div>