Alerts

	
		
		Copy
	

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

	
		
		Copy
	

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

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

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

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

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