Alerts | Dreams ERP - Tailwind CSS ERP Admin Dashboard 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-transparent rounded-lg text-primary mb-3">
			This is a simple primary alert
		</div>

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

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

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

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

		<div role="alert" class="p-4 font-medium bg-danger-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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>