Toast Notifications with Large Icon - Tailwind Component
Toast Notifications notify the user of a system occurrence, it is use Tailwind CSS to create this beautiful alert tailwind component.
alert
Loading component...
82 lines
<div class="container items-center px-4 py-8 m-auto mt-5 space-y-5 bg-gray-200 dark:bg-gray-800">
<div class="md:mx-24 lg:mx-0">
<div
class="max-w-sm mx-auto text-center bg-red-50 bg-opacity-40 rounded-2xl px-8 pb-8 shadow shadow-red-200 dark:bg-red-900 dark:shadow-red-900 dark:bg-opacity-40">
<div class="flex justify-end items-center py-3">
<span
class="flex-shrink-0 inline-flex items-center justify-center leading-none bg-gray-800 rounded-full cursor-pointer -mr-4 hover:bg-gray-200 dark:bg-red-700 dark:hover:bg-gray-800">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 :w-6 text-gray-200 hover:text-gray-800 dark:text-gray-900 dark:hover:text-red-600"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd" />
</svg>
</span>
</div>
<img src="https://cdn-icons-png.flaticon.com/512/743/743418.png"
alt="Emoji icons created by Vectors Market - Flatico" class="w-20 h-20 mx-auto">
<div class="my-6 h-0.5 bg-gray-300 dark:bg-red-600"></div>
<h1 class="text-lg font-semibold text-red-500 dark:text-red-400">Nooo! Something went wrong.</h1>
<p class="text-xs text-gray-500 my-3 text-center dark:text-gray-300">
We've sorry that you have to experience some problems please by try later.
</p>
</div>
</div>
<div class="md:mx-24 lg:mx-0">
<div
class="max-w-sm mx-auto text-center bg-green-50 bg-opacity-40 rounded-2xl px-8 pb-8 shadow shadow-green-200 dark:bg-green-900 dark:shadow-green-900 dark:bg-opacity-40">
<div class="flex justify-end items-center py-3">
<span
class="flex-shrink-0 inline-flex items-center justify-center leading-none bg-gray-800 rounded-full cursor-pointer -mr-4 hover:bg-gray-200 dark:bg-green-700 dark:hover:bg-gray-800">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 :w-6 text-gray-200 hover:text-gray-800 dark:text-gray-900 dark:hover:text-green-600"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd" />
</svg>
</span>
</div>
<img src="https://cdn-icons-png.flaticon.com/512/743/743267.png"
alt="Angry icons created by Vectors Market - Flaticon" class="w-20 h-20 mx-auto">
<div class="my-6 h-0.5 bg-gray-300 dark:bg-green-600"></div>
<h1 class="text-lg font-semibold text-green-500 dark:text-green-400">Amazing success!</h1>
<p class="text-xs text-gray-500 my-3 text-center dark:text-gray-300">
You setting have been successfully updated onjoy!
</p>
</div>
</div>
<div class="md:mx-24 lg:mx-0">
<div
class="max-w-sm mx-auto text-center bg-blue-50 bg-opacity-40 rounded-2xl px-8 pb-8 shadow shadow-blue-200 dark:bg-blue-900 dark:shadow-blue-900 dark:bg-opacity-40">
<div class="flex justify-end items-center py-3">
<span
class="flex-shrink-0 inline-flex items-center justify-center leading-none bg-gray-800 rounded-full cursor-pointer -mr-4 hover:bg-gray-200 dark:bg-blue-700 dark:hover:bg-gray-800">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 :w-6 text-gray-200 hover:text-gray-800 dark:text-gray-900 dark:hover:text-blue-600"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd" />
</svg>
</span>
</div>
<img src="https://cdn-icons-png.flaticon.com/512/752/752674.png"
alt="Alert icons created by Vectors Market - Flaticon" class="w-20 h-20 mx-auto">
<div class="my-6 h-0.5 bg-gray-300 dark:bg-blue-600"></div>
<h1 class="text-lg font-semibold text-blue-500 dark:text-blue-400">Please check your input!</h1>
<p class="text-xs text-gray-500 my-3 text-center dark:text-gray-300">
Please keep in mind to check your information before sending your request out.
</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>