Simple notification
Notification badges can evoke joy or distress, depending on why you're receiving them. We often see badges in the form of standard red dots on mobile app icons. Social media notification badges usually indicate participation, which is a good thing, indicating engagement.
Notification in their simplest form display to the upper right of the content that it wraps and requires the badge slot.
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-auto left-auto right-0 top-0 z-10 inline-block -translate-y-1/2 translate-x-2/4 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 rounded-full bg-red-600 p-2.5 text-xs"></div>
<div
class="flex items-center justify-center rounded-lg bg-primary-500 px-8 py-6 text-center text-white shadow-lg dark:text-gray-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-10 w-10">
<path
d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
<path
d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
</svg>
</div>
</div>
Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Classic badge notification
Notification allows you to use custom text inside to explain what the badge means.
New
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-auto left-auto right-0 top-0 z-10 inline-block -translate-y-1/2 translate-x-2/4 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 whitespace-nowrap rounded-full bg-indigo-700 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-white">
New
</div>
<div
class="flex items-center justify-center rounded-lg bg-pink-500 px-8 py-6 text-center text-white shadow-lg dark:text-gray-200">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-10 w-10"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
</div>
</div>
Notification within tabs
Notifications can be used with an tabs.
Tab 1 content
Tab 2 content
Tab 3 content
<ul
class="mb-4 flex list-none flex-col flex-wrap border-b-0 pl-0 md:flex-row"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-news"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-6 py-3 text-xs font-medium uppercase leading-tight text-[#4b5563] hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-[#2563eb] data-[te-nav-active]:text-[#2563eb] dark:hover:bg-transparent"
data-te-toggle="pill"
data-te-target="#tabs-news"
data-te-nav-active
role="tab"
aria-controls="tabs-news"
aria-selected="true"
>News</a
>
</li>
<li role="presentation">
<a
href="#tabs-notification"
class="relative my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-6 py-3 text-xs font-medium uppercase leading-tight text-[#4b5563] hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-[#2563eb] data-[te-nav-active]:text-[#2563eb] dark:hover:bg-transparent"
data-te-toggle="pill"
data-te-target="#tabs-notification"
role="tab"
aria-controls="tabs-notification"
aria-selected="true"
>Notifications
<div
class="absolute bottom-auto left-auto right-0 top-0 z-10 inline-block -translate-y-1/2 translate-x-2/4 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 whitespace-nowrap rounded-full bg-neutral-700 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-white">
7
</div>
</a>
</li>
<li role="presentation">
<a
href="#tabs-messages"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-6 py-3 text-xs font-medium uppercase leading-tight text-[#4b5563] hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-[#2563eb] data-[te-nav-active]:text-[#2563eb] dark:hover:bg-transparent"
data-te-toggle="pill"
data-te-target="#tabs-messages"
role="tab"
aria-controls="tabs-messages"
aria-selected="true"
>Messages</a
>
</li>
</ul>
<div class="tab-content" id="tabs-tabContent">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-news"
role="tabpanel"
aria-labelledby="tabs-home-tab"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-notification"
role="tabpanel"
aria-labelledby="tabs-home-tab">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages"
role="tabpanel"
aria-labelledby="tabs-home-tab">
Tab 3 content
</div>
</div>
// Initialization for ES Users
import {
Tabs,
initTE,
} from "tw-elements";
initTE({ Tabs });
Notification within button
Notifications can be used with an buttons.
99+
<div class="relative inline-flex w-fit">
<div
class="absolute bottom-auto left-auto right-0 top-0 z-10 inline-block -translate-y-1/2 translate-x-2/4 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 whitespace-nowrap rounded-full bg-indigo-700 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-white">
99+
</div>
<button
type="button"
class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
E-mails
</button>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Notification within avatar
Notifications can be used with an avatar.
This is useful when you want to display the user from whom you received a message, for example.
writing…
<div class="relative my-6 inline-flex w-fit">
<div
class="absolute bottom-auto left-auto right-0 top-0 z-10 inline-block -translate-y-1/2 translate-x-2/4 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 whitespace-nowrap rounded-full bg-primary-500 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-white">
writing…
</div>
<div class="h-24 w-24">
<img
src="https://tecdn.b-cdn.net/img/new/avatars/8.jpg"
class="h-full w-full max-w-full rounded-lg object-cover" />
</div>
</div>
Notification start
Use the following example to make the notification tag display on the top on the left.
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-auto left-0 right-auto top-0 z-10 inline-block -translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 rounded-full bg-pink-700 p-2.5 text-xs"></div>
<div
class="flex items-center justify-center rounded-lg bg-indigo-400 px-8 py-6 text-center text-white shadow-lg dark:text-gray-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-10 w-10">
<path
fill-rule="evenodd"
d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
clip-rule="evenodd" />
</svg>
</div>
</div>
Notification center
Use the following example to make the notification tag display on the top center.
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-auto left-2/4 right-2/4 top-0 z-10 inline-block -translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 rounded-full bg-pink-700 p-2.5 text-xs"></div>
<div
class="flex items-center justify-center rounded-lg bg-indigo-400 px-8 py-6 text-center text-white shadow-lg dark:text-gray-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-10 w-10">
<path
fill-rule="evenodd"
d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
clip-rule="evenodd" />
</svg>
</div>
</div>
Notification end (default)
Use the following example to make the notification tag display on the top on the right.
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-auto left-auto right-0 top-0 z-10 inline-block -translate-y-1/2 translate-x-2/4 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 rounded-full bg-pink-700 p-2.5 text-xs"></div>
<div
class="flex items-center justify-center rounded-lg bg-indigo-400 px-8 py-6 text-center text-white shadow-lg dark:text-gray-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-10 w-10">
<path
fill-rule="evenodd"
d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
clip-rule="evenodd" />
</svg>
</div>
</div>
Notification middle start
Use the following example to make the notification tag display in the middle on the left.
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-2/4 left-0 right-auto top-2/4 z-10 inline-block -translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 rounded-full bg-pink-700 p-2.5 text-xs"></div>
<div
class="flex items-center justify-center rounded-lg bg-indigo-400 px-8 py-6 text-center shadow-lg">
<div>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="bell"
class="mx-auto w-10 text-white"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path
fill="currentColor"
d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path>
</svg>
</div>
</div>
</div>
Notification middle center
Use the following example to make the notification tag display in the middle center.
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-2/4 left-2/4 right-auto top-2/4 z-10 inline-block -translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 rounded-full bg-pink-700 p-2.5 text-xs"></div>
<div
class="flex items-center justify-center rounded-lg bg-indigo-400 px-8 py-6 text-center shadow-lg">
<div>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="bell"
class="mx-auto w-10 text-white"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path
fill="currentColor"
d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path>
</svg>
</div>
</div>
</div>
Notification middle end
Use the following example to make the notification tag display in the middle on the right.
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-2/4 left-auto right-0 top-2/4 z-10 inline-block -translate-y-1/2 translate-x-2/4 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 rounded-full bg-pink-700 p-2.5 text-xs"></div>
<div
class="flex items-center justify-center rounded-lg bg-indigo-400 px-8 py-6 text-center shadow-lg">
<div>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="bell"
class="mx-auto w-10 text-white"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path
fill="currentColor"
d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path>
</svg>
</div>
</div>
</div>
Notification bottom start
Use the following example to make the notification tag display in the bottom left.
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-0 left-0 right-auto top-auto z-10 inline-block -translate-x-2/4 translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 rounded-full bg-pink-700 p-2.5 text-xs"></div>
<div
class="flex items-center justify-center rounded-lg bg-indigo-400 px-8 py-6 text-center shadow-lg">
<div>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="bell"
class="mx-auto w-10 text-white"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path
fill="currentColor"
d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path>
</svg>
</div>
</div>
</div>
Notification bottom center
Use the following example to make the notification tag display in the bottom middle.
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-0 left-2/4 right-2/4 top-auto z-10 inline-block -translate-x-2/4 translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 rounded-full bg-pink-700 p-2.5 text-xs"></div>
<div
class="flex items-center justify-center rounded-lg bg-indigo-400 px-8 py-6 text-center shadow-lg">
<div>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="bell"
class="mx-auto w-10 text-white"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path
fill="currentColor"
d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path>
</svg>
</div>
</div>
</div>
Notification bottom end
Use the following example to make the notification tag display in the bottom right.
<div class="relative m-6 inline-flex w-fit">
<div
class="absolute bottom-0 left-auto right-0 top-auto z-10 inline-block translate-x-2/4 translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 rounded-full bg-pink-700 p-2.5 text-xs"></div>
<div
class="flex items-center justify-center rounded-lg bg-indigo-400 px-8 py-6 text-center shadow-lg">
<div>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="bell"
class="mx-auto w-10 text-white"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path
fill="currentColor"
d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path>
</svg>
</div>
</div>
</div>
Related resources
Tutorials:
Extended Docs:
colors
hover effects
icons
images
mask
mega menu
navbar
offcanvas
pills
sidenav
tabs
alerts
avatar
badges
buttons
popover
social buttons
toast
tooltip
center grid items
dark theme
display flex
float right
position
spacing
text color
z index