Alert Message With Icon - Tailwind Component
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Create alerts with icons and dissmiss button.
alert
Loading component...
96 lines
<h1 class="text-center font-bold pt-10 text-3xl">Alert Message</h1>
<div class="p-10 flex flex-col gap-5 items-center">
<div class="flex flex-row py-2 items-center bg-green-100 border border-green-500 rounded-lg shadow overflow-hidden sm:w-6/12 dark:bg-green-200">
<span class="flex-shrink-0 inline-flex mx-3 item-center justify-center leading-none bg-green-500 dark:bg-green-600 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 md:h-8 md:w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</span>
<div class="flex-1 p-2">
<p class="text-sm md:text-base font-medium text-green-700 dark:text-green-800">A simple info alert</p>
</div>
<div class="row px-4 flex place-items-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500 dark:text-green-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="flex flex-row py-2 items-center bg-yellow-100 border border-yellow-500 rounded-lg shadow overflow-hidden sm:w-6/12 dark:bg-yellow-200">
<span class="flex-shrink-0 inline-flex mx-3 item-center justify-center leading-none bg-yellow-500 dark:bg-yellow-600 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 md:h-8 md:w-8 text-white" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clip-rule="evenodd" />
</svg>
</span>
<div class="flex-1 p-2">
<p class="text-sm md:text-base font-medium text-yellow-700 dark:text-yellow-800">A simple info alert</p>
</div>
<div class="row px-4 flex place-items-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-500 dark:text-yellow-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="flex flex-row py-2 items-center bg-red-100 border border-red-500 rounded-lg shadow overflow-hidden sm:w-6/12 dark:bg-red-200">
<span class="flex-shrink-0 inline-flex mx-3 item-center justify-center leading-none bg-red-500 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 md:h-8 md:w-8 text-white" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd" />
</svg>
</span>
<div class="flex-1 p-2">
<p class="text-sm md:text-base font-medium text-red-700 dark:text-red-800">A simple info alert</p>
</div>
<div class="row px-4 flex place-items-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-red-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="flex flex-row py-2 items-center bg-blue-100 border border-blue-500 rounded-lg shadow overflow-hidden sm:w-6/12 dark:bg-blue-200">
<span class="flex-shrink-0 inline-flex mx-3 item-center justify-center leading-none bg-blue-500 dark:bg-blue-600 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 md:h-8 md:w-8 text-white" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd" />
</svg>
</span>
<div class="flex-1 p-2">
<p class="text-sm md:text-base font-medium text-blue-700 dark:text-blue-800">A simple info alert</p>
</div>
<div class="row px-4 flex place-items-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-500 dark:text-blue-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>