Flash Notifications - Tailwind Component
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages, it is use Tailwind CSS to create this beautiful alert tailwind component.
alert
Loading component...
91 lines
<div class="mt-12 flex flex-col space-y-4 items-center mx-4 sm:mx-0">
<div
class="flex flex-row items-center rounded-lg shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl hover:shadow-xl bg-white dark:bg-gray-800 dark:hover:bg-gray-800">
<div class="flex w-2 mx-2 my-4 rounded-full bg-blue-600 h-16"></div>
<div class="h-full px-2 dark:bg-gray-100 dark:group-hover:bg-gray-200">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-blue-600 hover:text-blue-700 dark:text-gray-600 dark:group-hover:text-gray-700"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd" />
</svg>
</div>
<div class="mx-4 flex-row w-full">
<div class="flex flex-row items-center justify-between">
<h1 class="text-base sm:text-lg font-bold text-gray-800 dark:text-gray-200">Did you know?</h1>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 cursor-pointer text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200"
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>
</div>
<p class="text-xs sm:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">Here is something that you
might like to know.</p>
</div>
</div>
<div
class="flex flex-row items-center rounded-lg shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl hover:shadow-xl bg-white dark:bg-gray-800 dark:hover:bg-gray-800">
<div class="flex w-2 mx-2 my-4 rounded-full bg-yellow-600 h-16"></div>
<div class="h-full px-2 dark:bg-gray-100 dark:group-hover:bg-gray-200">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-yellow-600 hover:text-yellow-700 dark:text-gray-600 dark:group-hover:text-gray-700"
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>
</div>
<div class="mx-4 flex-row w-full">
<div class="flex flex-row items-center justify-between">
<h1 class="text-base sm:text-lg font-bold text-gray-800 dark:text-gray-200">Uh oh, something went wrong</h1>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 cursor-pointer text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200"
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>
</div>
<p class="text-xs sm:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">Sorry! There was a problem
with your request.</p>
</div>
</div>
<div
class="flex flex-row items-center rounded-lg shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl hover:shadow-xl bg-white dark:bg-gray-800 dark:hover:bg-gray-800">
<div class="flex w-2 mx-2 my-4 rounded-full bg-green-600 h-16"></div>
<div class="h-full px-2 dark:bg-gray-100 dark:group-hover:bg-gray-200">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-green-600 hover:text-green-700 dark:text-gray-600 dark:group-hover:text-gray-700"
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>
</div>
<div class="mx-4 flex-row w-full">
<div class="flex flex-row items-center justify-between">
<h1 class="text-base sm:text-lg font-bold text-gray-800 dark:text-gray-200">Yay! Everything worked</h1>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 cursor-pointer text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200"
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>
</div>
<p class="text-xs sm:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">Congrats on the internet
loading your request.</p>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
</style>