Badges
A stylish Solid Badge component crafted with TailwindCSS for clear, responsive, and visually appealing labels.
Example
Badge
Badge
Badge
example.tsx
const Badges = () => {
return (
<>
<div className="bg-white text-black rounded-md p-1 select-none font-semibold">Badge</div>
<div className="bg-[#2E7D32] text-white rounded-md p-1 select-none font-semibold">Badge</div>
<div className="bg-pink-500 text-white rounded-md p-1 select-none font-semibold">Badge</div>
</>
)
}
export default Badges;
Outline Badges
A stylish Outline Badge component crafted with TailwindCSS for clear, responsive, and visually appealing labels.
Example
Badge
Badge
Badge
example.tsx
const Badge = () => {
return (
<>
<div className='bg-transparent text-white border border-white font-semibold p-1 rounded-md select-none'>
Badge
</div>
<div className='bg-transparent text-[#2E7D32] border border-[#2E7D32] font-semibold p-1 rounded-md select-none'>
Badge
</div>
<div className='bg-transparent text-pink-500 border border-pink-500 font-semibold p-1 rounded-md select-none'>
Badge
</div>
</>
);
};
export default Badge;
Ping Badges
A dynamic Ping Badge component designed with TailwindCSS for clear, responsive, and attention-grabbing notifications.
Example
Badge
100+Badge
example.tsx
const Badge = () => {
return (
<>
<div className="relative border-white text-white border p-1 rounded-md select-none">
<div className="absolute size-3 -right-1 -top-1 p-1 bg-[#D32F2F] rounded-full"></div>
<span>Badge</span>
</div>
<div className="relative border-white text-white border p-1 rounded-md select-none">
<span className="absolute -right-2 -top-1 p-0.5 bg-[#D32F2F] rounded-full text-[8px] text-white">100+</span>
<span>Badge</span>
</div>
</>
)
}
export default Badge;
