Tailwind CSS Notification - Free Examples & Tutorial

Use responsive notification component with helper examples for notification badge, within button, within avatar & more. Free download, open-source license.

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.

HTML

        
            
      <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">
          <span class="[&>svg]:h-10 [&>svg]:w-10">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor">
              <path
                d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
              <path
                d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
            </svg>
          </span>
        </div>
      </div>

Hey there 👋 we're excited about TW elements and want to see it grow! 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

HTML

        
            
      <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 shadow-lg">
          <span
            class="[&>svg]:w-10 [&>svg]:fill-white dark:[&>svg]:fill-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
              <!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
              <path
                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
            </svg>
          </span>
        </div>
      </div>

Notification within tabs

Notifications can be used with an tabs.

HTML
javascript

        
            
      <ul
        class="mb-5 flex list-none flex-row flex-wrap border-b-0 ps-0"
        role="tablist"
        data-twe-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-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-zinc-100 focus:isolate focus:border-transparent data-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-target="#tabs-news"
            data-twe-nav-active
            role="tab"
            aria-controls="tabs-news"
            aria-selected="true"
            >News</a
          >
        </li>
        <li role="presentation" class="z-20">
          <a
            href="#tabs-notifications"
            class="relative my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-zinc-100 focus:isolate focus:border-transparent data-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-target="#tabs-notifications"
            role="tab"
            aria-controls="tabs-notifications"
            aria-selected="false"
            >Notifications
            <div
              class="absolute bottom-auto left-auto right-0 top-0 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-800 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-white">
              7
            </div></a
          >
        </li>
        <li role="presentation" class="z-10">
          <a
            href="#tabs-messages"
            class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-zinc-100 focus:isolate focus:border-transparent data-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-target="#tabs-messages"
            role="tab"
            aria-controls="tabs-messages"
            aria-selected="false"
            >Messages
          </a>
        </li>
      </ul>
      <div class="mb-6">
        <div
          class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[twe-tab-active]:block"
          id="tabs-news"
          role="tabpanel"
          aria-labelledby="tabs-news-tab"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-tab-active]:block"
          id="tabs-notifications"
          role="tabpanel"
          aria-labelledby="tabs-notifications-tab">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-tab-active]:block"
          id="tabs-messages"
          role="tabpanel"
          aria-labelledby="tabs-notifications-tab">
          Tab 3 content
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Tabs,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Tabs });

Notification within button

Notifications can be used with an buttons.

99+

HTML
javascript

        
            
      <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-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
          data-twe-ripple-init
          data-twe-ripple-color="light">
          E-mails
        </button>
      </div>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ 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…

HTML

        
            
      <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-100 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500">
          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.

HTML

        
            
      <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">
          <span class="[&>svg]:h-10 [&>svg]:w-10">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor">
              <path
                fill-rule="evenodd"
                d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
                clip-rule="evenodd" />
            </svg>
          </span>
        </div>
      </div>

Notification center

Use the following example to make the notification tag display on the top center.

HTML

        
            
      <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">
          <span class="[&>svg]:h-10 [&>svg]:w-10">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor">
              <path
                fill-rule="evenodd"
                d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
                clip-rule="evenodd" />
            </svg>
          </span>
        </div>
      </div>

Notification end (default)

Use the following example to make the notification tag display on the top on the right.

HTML

        
            
      <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">
          <span class="[&>svg]:h-10 [&>svg]:w-10">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor">
              <path
                fill-rule="evenodd"
                d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
                clip-rule="evenodd" />
            </svg>
          </span>
        </div>
      </div>

Notification middle start

Use the following example to make the notification tag display in the middle on the left.

HTML

        
            
      <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 text-white shadow-lg dark:text-gray-200">
          <div>
            <span class="[&>svg]:h-10 [&>svg]:w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="evenodd"
                  d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
                  clip-rule="evenodd" />
              </svg>
            </span>
          </div>
        </div>
      </div>

Notification middle center

Use the following example to make the notification tag display in the middle center.

HTML

        
            
      <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 text-white shadow-lg dark:text-gray-200">
          <div>
            <span class="[&>svg]:h-10 [&>svg]:w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="evenodd"
                  d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
                  clip-rule="evenodd" />
              </svg>
            </span>
          </div>
        </div>
      </div>

Notification middle end

Use the following example to make the notification tag display in the middle on the right.

HTML

        
            
      <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 text-white shadow-lg dark:text-gray-200">
          <div>
            <span class="[&>svg]:h-10 [&>svg]:w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="evenodd"
                  d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
                  clip-rule="evenodd" />
              </svg>
            </span>
          </div>
        </div>
      </div>

Notification bottom start

Use the following example to make the notification tag display in the bottom left.

HTML

        
            
      <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 text-white shadow-lg dark:text-gray-200">
          <div>
            <span class="[&>svg]:h-10 [&>svg]:w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="evenodd"
                  d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
                  clip-rule="evenodd" />
              </svg>
            </span>
          </div>
        </div>
      </div>

Notification bottom center

Use the following example to make the notification tag display in the bottom middle.

HTML

        
            
      <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 text-white shadow-lg dark:text-gray-200">
          <div>
            <span class="[&>svg]:h-10 [&>svg]:w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="evenodd"
                  d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
                  clip-rule="evenodd" />
              </svg>
            </span>
          </div>
        </div>
      </div>

Notification bottom end

Use the following example to make the notification tag display in the bottom right.

HTML

        
            
      <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 text-white shadow-lg dark:text-gray-200">
          <div>
            <span class="[&>svg]:h-10 [&>svg]:w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="evenodd"
                  d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
                  clip-rule="evenodd" />
              </svg>
            </span>
          </div>
        </div>
      </div>

Notifications

Tailwind CSS Notifications

Simple notification

Classic badge notification

Notification within tabs

Notification within button

Notification within avatar

Notification start

Notification center

Notification end (default)

Notification middle start

Notification middle center

Notification middle end

Notification bottom start

Notification bottom center

Notification bottom end

Access restricted

To view this section you must have an active PRO account

Notifications

Tailwind CSS Notifications

Simple notification

Classic badge notification

Notification within tabs

Notification within button

Notification within avatar

Notification start

Notification center

Notification end (default)

Notification middle start

Notification middle center

Notification middle end

Notification bottom start

Notification bottom center

Notification bottom end

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):