Notification number over badge Tailwind

user_13581207 0
Viewed 267

starting point on code how should it look from figma

I need to create a kinda notification number as in the second picture that is my mockup in figma. As for now I have those three badges written like this.

            <div className="mt-3">
              <span className="bg-indigo-100 text-indigo-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-900">
                Indigo
              </span>
              <span className="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900">
                Purple
              </span>
              <span className="bg-pink-100 text-pink-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-900">
                Pink
              </span>
            </div>

I'm using storybook, tailwind UI and react (18).

tailwind-ui storybook tailwind-css reactjs
1 Answers

The general idea is the badge container would be set to relative and then use absolute positioning for the numbers.

https://play.tailwindcss.com/VMWUIUmNFQ

<div class="p-5">
  <strong class="relative inline-flex items-center rounded border border-gray-200 px-2.5 py-1.5 text-xs font-medium">
    <span class="absolute -top-2 -right-2 h-5 w-5 rounded-full bg-green-600 flex justify-center items-center items"><span>10</span></span>
    <span class="ml-1.5 text-green-700"> Indigo </span>
  </strong>
</div>
user_27179510
Related