Hello guys in this tutorial i have added Top 10 Tailwind CSS notification code examples which are available on Codepen and other resources.
What’s use of Notification component?
The notification component can be used to provide information to your users such as displaying a notification message on a webpage.
Best Collection of Tailwind Notification examples
#01 Tailwind CSS Notification Card
Tailwind CSS Tailwind CSS Notification Card, which was developed by Rahul. Moreover, you can customize it according to your wish and need.
<div class="flex flex-col space-y-4 min-w-screen h-screen animated fadeIn faster fixed left-0 top-0 flex justify-center items-center inset-0 z-50 outline-none focus:outline-none bg-gray-900">
<div class="flex flex-col p-8 bg-red-200 shadow-md hover:shodow-lg rounded">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 rounded p-3 border border-red-800 text-gray-100 bg-red-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div class="flex flex-col ml-3">
<div class="font-medium leading-none text-red-500">Delete Your Acccount ?</div>
<p class="text-sm text-gray-500 leading-none mt-1">By deleting your account you will lose your all data </p>
</div>
</div>
<button class="flex-no-shrink bg-red-500 px-5 ml-4 py-2 text-sm shadow-sm hover:shadow-lg font-medium tracking-wider border-2 border-red-500 text-white rounded">Delete</button>
</div>
</div>
</div>| Author: | Rahul |
| Made with: | HTML & Tailwind CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Tailwind CSS Notification |
#02 Free Tailwind CSS Notification Component
Notification Component, which was developed by Harishash. Moreover, you can customize it according to your wish and need.
| Author: | Harishash |
| Made with: | HTML & Tailwind CSS |
| Demo Link: | Source Code / Demo |
| Tags: | CSS Notification Component |
#03 Tailwind CSS Toast Notification
CSS Toast Notification, which was developed by zoltanszogyenyi. Moreover, you can customize it according to your wish and need.
<!-- component -->
<!-- This is an example component -->
<div class="max-w-2xl mx-auto">
<div id="toast-default"
class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
role="alert">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3 text-sm font-normal">Set yourself free.</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-collapse-toggle="toast-default" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
</button>
</div>
<p class="mt-5">This toast component is part of a larger, open-source library of Tailwind CSS components. Learn more
by going to the official <a class="text-blue-600 hover:underline"
href="#" target="_blank">Flowbite Documentation</a>.
</p>
</div>| Author: | zoltanszogyenyi |
| Made with: | HTML & Tailwind CSS |
| Demo Link: | Source Code / Demo |
| Tags: | CSS Toast Notification |
#04 Tailwind CSS Notification alert
CSS Notification alert, which was developed by LeventeNagy. Moreover, you can customize it according to your wish and need.
<div class="max-w-lg mx-auto items-center h-screen">
<div class="flex justify-between px-3 py-1 bg-white items-center gap-1 rounded-lg border border-gray-100 my-3">
<div class="relative w-16 h-16 rounded-full hover:bg-red-700 bg-gradient-to-r from-purple-400 via-blue-500 to-red-400 ">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-14 h-14 bg-gray-200 rounded-full border-2 border-white">
<img class="w-full h-full object-cover rounded-full" src="https://d2qp0siotla746.cloudfront.net/img/use-cases/profile-picture/template_3.jpg" alt="">
</div>
</div>
<div>
<span class="font-mono">Emma would like to connect with you</span>
</div>
<div class="flex gap-2">
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
</button>
</div>
</div>
<div class="flex justify-between px-3 py-1 bg-white items-center gap-1 rounded-lg border border-gray-100 my-3">
<div class="relative w-16 h-16 rounded-full hover:bg-red-700 bg-gradient-to-r from-purple-400 via-blue-500 to-red-400 ">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-14 h-14 bg-gray-200 rounded-full border-2 border-white">
<img class="w-full h-full object-cover rounded-full" src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
</div>
</div>
<div>
<span class="font-mono">Tom liked one of your comments</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
</svg>
</div>
</div>
<div class="flex justify-between px-3 py-1 bg-white items-center gap-1 rounded-lg border border-gray-100 my-3">
<div class="relative w-16 h-16 rounded-full hover:bg-red-700 bg-gradient-to-r from-purple-400 via-blue-500 to-red-400 ">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-14 h-14 bg-gray-200 rounded-full border-2 border-white">
<img class="w-full h-full object-cover rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
</div>
</div>
<div>
<span class="font-mono">Andrea posted a new Tweet have a look</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg>
</div>
</div>
</div>| Author: | LeventeNagy |
| Made with: | HTML & Tailwind CSS |
| Demo Link: | Source Code / Demo |
| Tags: | CSS Notification alert |
#05 Tailwind CSS Toaster Card
Tailwind CSS Toaster Card, which was developed by kgnfth. Moreover, you can customize it according to your wish and need.
<div class="flex items-center justify-center min-h-screen">
<div class="max-w-full text-sm rounded border shadow-sm pointer-events-auto bg-clip-padding w-80">
<div class="flex items-center px-3 py-2 text-gray-500 bg-gray-100 border-b-2 rounded-t bg-clip-padding">
<svg class="mr-2 text-lg rounded select-none" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
<path fill="#06B6D4" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd" />
</svg>
<strong class="mr-auto">Tailwind</strong>
<small>11 mins ago</small>
<button type="button" class="box-content p-1 ml-3 -mr-1 text-black rounded opacity-50 hover:opacity-100">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<line x1="200" y1="56" x2="56" y2="200" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="24" fill="none"></line>
<line x1="200" y1="200" x2="56" y2="56" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="24" fill="none"></line>
</svg>
</button>
</div>
<div class="p-3 bg-white">Hello, Tailwind! Bye Bye Boostrap.</div>
</div>
</div>| Author: | kgnfth |
| Made with: | HTML & Tailwind CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Tailwind CSS Toaster Card |
#06 Tailwind CSS Facebook Style Notification alert
Facebook Style Notification alert, which was developed by HasanMu. Moreover, you can customize it according to your wish and need.
<style>
.clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.to-cyan-400 {
--tw-gradient-to: #22d3ee;
}
.via-cyan-500 {
--tw-gradient-stops: var(--tw-gradient-from), #06b6d4, var(--tw-gradient-to, rgba(6, 182, 212, 0));
}
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<div x-data="{openNotify: false, open1: false, open2: false}" class="relative min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12 items-center">
<div>
<button @click="openNotify = true, open1 = true, open2 = true" class="px-3 py-2 flex justify-center items-center bg-gradient-to-tl from-blue-500 to-cyan-400 rounded text-white focus:outline-none font-semibold shadow hover:transition-colors hover:bg-gradient-to-tr transform transition hover:scale-110 ease-out duration-300 hover:shadow-md">
<div class="mr-2">
<svg class="w-5 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
</svg>
</div>
Show
</button>
</div>
<div x-cloak x-show="openNotify" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform scale-90"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90"
class="absolute bottom-5 left-8 flex flex-col space-y-2">
<div
x-cloak x-show="open1"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90"
class="bg-white cursor-pointer shadow rounded-lg px-3 py-2 w-64 space-y-2">
<!-- Header -->
<div class="flex justify-between items-center w-full">
<div class="font-semibold text-sm">
Notifikasi Baru
</div>
<div @click="open1 = !open1" class="h-6 w-6 flex justify-center items-center bg-gray-200 rounded-full cursor-pointer hover:bg-gray-300">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</div>
</div>
<!-- Content -->
<div class="flex justify-start items-start space-x-4">
<div class="relative flex flex-shrink-0">
<img src="https://images.unsplash.com/photo-1582789991349-8f8e6eb15308?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjN8fGFuaW1lfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Meow" class="w-14 h-14 rounded-full object-cover">
<div class="absolute -bottom-1 -right-2 h-7 w-7 bg-gradient-to-t from-blue-600 via-cyan-500 to-cyan-400 rounded-full text-white flex justify-center items-start">
<div class="">
<svg class="w-5 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"></path></svg>
</div>
</div>
</div>
<div class="flex flex-col h-20 overflow-hidden">
<div class="overflow-ellipsis overflow-hidden text-sm">
<div class="clamp-3 leading-tight ">
<b class="font-semibold">Hasan Muhammad</b> Menambahkann 2 foto di <b class="font-semibold">Tailwind CSS Indonesia</b>
</div>
</div>
<div class="text-blue-600 font-semibold text-xs leading-loose">15 menit yang lalu</div>
</div>
</div>
</div>
<div
x-cloak x-show="open2"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90"
class="bg-white cursor-pointer shadow rounded-lg px-3 py-2 w-64 space-y-2">
<!-- Header -->
<div class="flex justify-between items-center w-full">
<div class="font-semibold text-sm">
Notifikasi Baru
</div>
<div @click="open2 = !open2" class="h-6 w-6 flex justify-center items-center bg-gray-200 rounded-full cursor-pointer hover:bg-gray-300">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</div>
</div>
<!-- Content -->
<div class="flex justify-start items-start space-x-4">
<div class="relative flex flex-shrink-0">
<img src="https://images.unsplash.com/photo-1582789991349-8f8e6eb15308?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjN8fGFuaW1lfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Meow" class="w-14 h-14 rounded-full object-cover">
<div class="absolute -bottom-1 -right-2 h-7 w-7 bg-gradient-to-t from-blue-600 via-cyan-500 to-cyan-400 rounded-full text-white flex justify-center items-start">
<div class="">
<svg class="w-5 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"></path></svg>
</div>
</div>
</div>
<div class="flex flex-col h-20 overflow-hidden">
<div class="overflow-ellipsis overflow-hidden text-sm">
<div class="clamp-3 leading-tight ">
<b class="font-semibold">Hasan Muhammad</b> Menambahkann 2 foto di <b class="font-semibold">Tailwind CSS Indonesia</b>
</div>
</div>
<div class="text-blue-600 font-semibold text-xs leading-loose">15 menit yang lalu</div>
</div>
</div>
</div>
</div>
</div>| Author: | HasanMu |
| Made with: | HTML & Tailwind CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Facebook Style Notification alert |
#07 Simple notification alert
Simple notification alert, which was developed by josef256. Moreover, you can customize it according to your wish and need.
<!-- notificatoin box 1 -->
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 notification-box">
<div class="text-sm pb-2">
Notification Title
<span class="float-right">
<svg
class="fill-current text-gray-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="22"
height="22"
>
<path
class="heroicon-ui"
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
/>
</svg>
</span>
</div>
<div class="text-sm text-gray-600 tracking-tight ">
I will never close automatically. This is a purposely very very long
description that has many many characters and words.
</div>
</div>
<!-- notificatoin box 2 -->
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 notification-box flex">
<div class="pr-2">
<svg
class="fill-current text-green-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="22"
height="22"
>
<path
class="heroicon-ui"
d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
</div>
<div>
<div class="text-sm pb-2">
Notification Title
<span class="float-right">
<svg
class="fill-current text-gray-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="22"
height="22"
>
<path
class="heroicon-ui"
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
/>
</svg>
</span>
</div>
<div class="text-sm text-gray-600 tracking-tight ">
I will never close automatically. This is a purposely very very long
description that has many many characters and words.
</div>
</div>
</div>
<!-- notificatoin box 3 -->
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 notification-box flex">
<div class="pr-2">
<svg
class="fill-current text-red-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path
class="heroicon-ui"
d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.54a5 5 0 0 1 7.08 0 1 1 0 0 1-1.42 1.42 3 3 0 0 0-4.24 0 1 1 0 0 1-1.42-1.42zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
</div>
<div>
<div class="text-sm pb-2">
Notification Title
<span class="float-right">
<svg
class="fill-current text-gray-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="22"
height="22"
>
<path
class="heroicon-ui"
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
/>
</svg>
</span>
</div>
<div class="text-sm text-gray-600 tracking-tight ">
I will never close automatically. This is a purposely very very long
description that has many many characters and words.
</div>
</div>
</div>
<!-- notificatoin box 4 -->
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 notification-box flex">
<div class="pr-2">
<svg
class="fill-current text-orange-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path
class="heroicon-ui"
d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 9a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1zm0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
</div>
<div>
<div class="text-sm pb-2">
Notification Title
<span class="float-right">
<svg
class="fill-current text-gray-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="22"
height="22"
>
<path
class="heroicon-ui"
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
/>
</svg>
</span>
</div>
<div class="text-sm text-gray-600 tracking-tight ">
I will never close automatically. This is a purposely very very long
description that has many many characters and words.
</div>
</div>
</div>
<style>
.notification-box {
width:20rem;
}
</style>| Author: | josef256 |
| Made with: | HTML & Tailwind CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Simple notification alert |
#08 Awesome Card Notifications
Awesome Card Notifications, which was developed by kopidev. Moreover, you can customize it according to your wish and need.
<div class="h-screen grid place-items-center my-8">
<div class="lg:w-2/5 sm:w-3/5 w-11/12 bg-gray-100 dark:bg-gray-800 rounded-xl mx-auto border p-10 shadow-sm">
<div class="inline-flex items-center justify-between w-full">
<h3 class="font-bold text-xl sm:text-2xl text-gray-800 dark:text-white">Notifications</h3>
<button
class="inline-flex text-xs sm:text-sm bg-white px-2 sm:px-3 py-2 text-blue-500 items-center rounded font-medium
shadow border focus:outline-none transform active:scale-75 transition-transform duration-700 hover:bg-blue-500
hover:text-white hover:-translate-y-1 hover:scale-110 dark:text-gray-800 dark:hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 sm:mr-2" 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>
Close
</button>
</div>
<p class="mt-8 font-medium text-gray-500 text-sm sm:text-base dark:text-white">Today</p>
<div class="mt-2 px-6 py-4 bg-white rounded-lg shadow w-full">
<div class=" inline-flex items-center justify-between w-full">
<div class="inline-flex items-center">
<img
src="https://cdn-icons-png.flaticon.com/128/763/763812.png"
alt="Training Icon" class="w-6 h-6 mr-3">
<h3 class="font-bold text-base text-gray-800">Training</h3>
</div>
<p class="text-xs text-gray-500">
2 min ago
</p>
</div>
<p class="mt-1 text-sm">
Hey! Do you remember about choosing your training regime?
</p>
</div>
<div class="mt-2 px-6 py-4 bg-white rounded-lg shadow w-full">
<div class=" inline-flex items-center justify-between w-full">
<div class="inline-flex items-center">
<img
src="https://cdn-icons-png.flaticon.com/512/893/893257.png"
alt="Messages Icon" class="w-6 h-6 mr-3">
<h3 class="font-bold text-base text-gray-800">Messages</h3>
</div>
<p class="text-xs text-gray-500">
1 hour ago
</p>
</div>
<p class="mt-1 text-sm">
You have a new message
</p>
</div>
<p class="mt-8 font-medium text-gray-500 dark:text-white text-sm sm:text-base">Yesterday</p>
<div class="mt-2 px-6 py-4 bg-white rounded-lg shadow w-full">
<div class=" inline-flex items-center justify-between w-full">
<div class="inline-flex items-center">
<img
src="https://cdn-icons-png.flaticon.com/512/6863/6863272.png"
alt="Form Icon" class="w-6 h-6 mr-3">
<h3 class="font-bold text-base text-gray-800">Forms</h3>
</div>
<p class="text-xs text-gray-500">
12:47
</p>
</div>
<p class="mt-1 text-sm">
Remember about filling out the COVID-19 from before the next appointment tomorrow
</p>
</div>
<div class="mt-2 px-6 py-4 bg-white rounded-lg shadow w-full">
<div class=" inline-flex items-center justify-between w-full">
<div class="inline-flex items-center">
<img
src="https://cdn-icons-png.flaticon.com/128/763/763812.png"
alt="Training Icon" class="w-6 h-6 mr-3">
<h3 class="font-bold text-base text-gray-800">Training</h3>
</div>
<p class="text-xs text-gray-500">
12:43
</p>
</div>
<p class="mt-1 text-sm">
We're glad you've decided to use our training system! Let's now set a complete of things
</p>
</div>
<button
class="inline-flex text-sm bg-white justify-center px-4 py-2 mt-12 w-full text-red-500 items-center rounded font-medium
shadow border focus:outline-none transform active:scale-75 transition-transform duration-700 hover:bg-red-500
hover:text-white hover:-translate-y-1 hover:scale-110 dark:hover:bg-white dark:text-gray-800 dark:hover:text-gray-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 sm:mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Clear all notifications
</button>
</div>
</div>| Author: | kopidev |
| Made with: | HTML & Tailwind CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Awesome Card Notifications |
#09 Notifications Tailwind with AlpineJS
Notifications with AlpineJS, which was developed by Andre Prilly Kurniawan. Moreover, you can customize it according to your wish and need.
| Author: | Andre Prilly Kurniawan |
| Made with: | HTML & Tailwind CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Notifications with AlpineJS |
#10 Tailwind Notifications Alert Components
Tailwind Notifications Alert Components, which was developed by Rahul. Moreover, you can customize it according to your wish and need.
<section class="bg-coolGray-50 py-4">
<div class="container px-4 mx-auto">
<div class="mx-auto p-6 bg-green-100 border border-green-300 rounded-md shadow-dashboard">
<div class="flex flex-wrap justify-between -m-2">
<div class="flex-1 p-2">
<div class="flex flex-wrap -m-1">
<div class="w-auto p-1">
<svg class="relative top-0.5" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="#2AD168"></path>
</svg>
</div>
<div class="flex-1 p-1">
<h3 class="mb-0.5 font-medium text-sm text-coolGray-900">Notification success!</h3>
<p class="font-medium text-sm text-coolGray-600">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="w-auto p-2">
<a href="#">
<svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.93999 8L13.14 3.80667C13.2655 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2655 2.98554 13.14 2.86C13.0145 2.73446 12.8442 2.66394 12.6667 2.66394C12.4891 2.66394 12.3189 2.73446 12.1933 2.86L8 7.06L3.80666 2.86C3.68113 2.73446 3.51086 2.66394 3.33333 2.66394C3.15579 2.66394 2.98553 2.73446 2.85999 2.86C2.73446 2.98554 2.66393 3.1558 2.66393 3.33333C2.66393 3.51087 2.73446 3.68113 2.85999 3.80667L7.06 8L2.85999 12.1933C2.79751 12.2553 2.74791 12.329 2.71407 12.4103C2.68022 12.4915 2.6628 12.5787 2.6628 12.6667C2.6628 12.7547 2.68022 12.8418 2.71407 12.9231C2.74791 13.0043 2.79751 13.078 2.85999 13.14C2.92197 13.2025 2.9957 13.2521 3.07694 13.2859C3.15818 13.3198 3.24532 13.3372 3.33333 13.3372C3.42134 13.3372 3.50847 13.3198 3.58971 13.2859C3.67095 13.2521 3.74469 13.2025 3.80666 13.14L8 8.94L12.1933 13.14C12.2553 13.2025 12.329 13.2521 12.4103 13.2859C12.4915 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8418 13.3198 12.923 13.2859C13.0043 13.2521 13.078 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.2859 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.2859 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.93999 8Z" fill="#8896AB"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>| Author: | Rahul |
| Made with: | HTML & Tailwind CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Tailwind Alert Components |
Top 10 Tailwind CSS 3 Alert Examples
Hello guys in this tutorial i have added Top 10 Tailwind CSS alert code examples which are available on Codepen and other resources.
