徽章 Tailwind 上的通知编号

Question

starting point on code how should it look from figma

我需要创建一个有点像第二张图片中的通知号码，这是我在 figma 中的模型。至于现在我有这么写的那三个徽章

            <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>

我正在使用故事书、tailwind UI 和 React (18)。

Answer 1

总体思路是将徽章容器设置为 relative，然后对数字使用绝对定位。

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>

徽章 Tailwind 上的通知编号

Notification number over badge Tailwind

reactjs

tailwind-css

storybook

tailwind-ui