Tailwind CSS Alerts (Bootstrap Plugins)

Alerts are used to feedback to the user action or system activity.

Solid

<div class="bg-green-600 border-green-600 border mb-3 text-white rounded-lg p-4" role="alert">A simple Green alert—check it out!</div>
<div class="bg-yellow-500 border-yellow-500 border mb-3 text-white rounded-lg p-4" role="alert">A simple Yellow alert—check it out!</div>
<div class="bg-red-600 border-red-600 border mb-3 text-white rounded-lg p-4" role="alert">A simple Red alert—check it out!</div>
<div class="bg-cyan-400 border-cyan-400 border mb-3 text-white rounded-lg p-4" role="alert">A simple Cyan alert—check it out!</div>
<div class="bg-gray-200 border-gray-200 border mb-3 text-gray-800 rounded-lg p-4" role="alert">A simple Gray alert—check it out!</div>
<div class="bg-gray-800 border-gray-800 border mb-3 text-white rounded-lg p-4" role="alert">A simple Dark Gray alert—check it out!</div>

Soft

<div class="bg-green-100 border-green-200 border mb-3 text-green-900 rounded-lg p-4" role="alert">A soft Green alert—check it out!</div>
<div class="bg-yellow-100 border-yellow-200 border mb-3 text-yellow-900 rounded-lg p-4" role="alert">A soft Yellow alert—check it out!</div>
<div class="bg-red-100 border-red-200 border mb-3 text-red-900 rounded-lg p-4" role="alert">A soft Red alert—check it out!</div>
<div class="bg-cyan-100 border-cyan-200 border mb-3 text-cyan-900 rounded-lg p-4" role="alert">A soft Cyan alert—check it out!</div>
<div class="bg-gray-100 border-gray-200 border mb-3 text-gray-900 rounded-lg p-4" role="alert">A soft Gray alert—check it out!</div>

With Icon

<div class="bg-green-100 border-green-200 border mb-3 text-green-900 rounded-lg p-4" role="alert">A soft Green alert—check it out!</div>
<div class="bg-yellow-100 border-yellow-200 border mb-3 text-yellow-900 rounded-lg p-4" role="alert">A soft Yellow alert—check it out!</div>
<div class="bg-red-100 border-red-200 border mb-3 text-red-900 rounded-lg p-4" role="alert">A soft Red alert—check it out!</div>
<div class="bg-cyan-100 border-cyan-200 border mb-3 text-cyan-900 rounded-lg p-4" role="alert">A soft Cyan alert—check it out!</div>
<div class="bg-gray-100 border-gray-200 border mb-3 text-gray-900 rounded-lg p-4" role="alert">A soft Gray alert—check it out!</div>

Dismissing

Add .alert and .alert-dismissible for dismiss the Alerts. (Required Bootstrap Plugin) 

	<div class="bg-green-100 border-green-200 border mb-3 text-green-900 rounded-lg p-4 alert alert-dismissible fade show" role="alert">
<div class="flex gap-2 items-center relative">
	<span>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			width="16"
			height="16"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
			stroke-linecap="round"
			stroke-linejoin="round"
			class="icon icon-tabler icons-tabler-outline icon-tabler-alert-triangle"
		>
			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
			<path d="M12 9v4" />
			<path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" />
			<path d="M12 16h.01" />
		</svg>
	</span>
	<span>A soft Green alert—check it out!</span>
	<button type="button" class="btn-close absolute top-0 right-0 z-20" data-bs-dismiss="alert" aria-label="Close">
		<svg
			xmlns="http://www.w3.org/2000/svg"
			width="18"
			height="18"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
			stroke-linecap="round"
			stroke-linejoin="round"
			class="icon icon-tabler icons-tabler-outline icon-tabler-x"
		>
			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
			<path d="M18 6l-12 12" />
			<path d="M6 6l12 12" />
		</svg>
	</button>
</div>
</div>