Styling Common Web Page Parts
Create small notification badges or tags.
Skill ID: StylingCommonParts_20
Description: Small, often colorful, bits of text to show a count or a status.
Where to apply: On top of bell icons, next to menu items, on product images.
Key Tailwind Classes:
bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full
Gotcha:
When placing a badge on top of another element (like an icon), forgetting
relative
on the icon's container and
absolute
on the badge. Positioning the badge precisely (e.g.,
top-0 right-0 -translate-x-1/2 -translate-y-1/2
for top-right corner) can also be fiddly.
Example:
Below is an example of a bell icon with a notification badge:
Code for the example above:
<div class="relative inline-block">
<!-- Icon -->
<svg class="h-8 w-8 text-slate-500" ...> ... </svg>
<!-- Badge -->
<span class="absolute top-0 right-0 inline-flex items-center justify-center
px-2 py-0.5 text-xs font-bold leading-none text-white
transform translate-x-1/2 -translate-y-1/2
bg-red-500 rounded-full">
3
</span>
</div>
Key classes used for the badge itself:
bg-red-500
,
text-white
,
text-xs
,
font-bold
,
px-2
,
py-0.5
,
rounded-full
.
For positioning: The parent
div
has
relative
. The badge
span
has
absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2
.