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>