Text alignment issue on badge - Tailwind - css

Question

I have created a badge component using Next.js and TailwindCSS.
After completing I can see there's a text alignment issue on the badge. When I add any alphabet with a tail I got the alignment issue. I am attaching my component as well as the web view of the badge. Any kind of help will be highly appreciated.
Thanks.
import clsx from 'clsx';
import { ReactNode } from 'react';
const classes = {
base: 'flex items-center justify-center font-medium leading-none',
size: {
sm: 'px-1.5 py-[3px] text-[10px]',
DEFAULT: 'px-2 py-1 text-xs',
lg: 'px-2.5 py-1 text-sm',
xl: 'px-3 py-1.5 text-base',
},
dot: {
size: {
sm: 'w-2.5 h-2.5 text-xs',
DEFAULT: 'w-4 h-4 text-sm',
lg: 'w-[18px] h-[18px] text-base',
xl: 'w-5 h-5 text-lg',
},
},
rounded: {
none: 'rounded-none',
sm: 'rounded-sm',
DEFAULT: 'rounded-md',
lg: 'rounded-lg',
full: 'rounded-full',
},
variant: {
solid: {
base: 'text-white',
color: {
DEFAULT: 'bg-gray-900 hover:enabled:bg-gray-1000',
primary: 'bg-primary-light',
secondary: 'bg-secondary-light',
success: 'bg-green-light',
warning: 'bg-orange-light',
danger: 'bg-red-light',
info: 'bg-blue-light',
},
},
flat: {
base: 'font-medium',
color: {
DEFAULT: 'bg-gray-300 text-gray-800',
primary: 'bg-primary-lighter text-primary-dark',
secondary: 'bg-secondary-lighter text-secondary-dark',
success: 'bg-green-lighter text-green-dark',
warning: 'bg-orange-lighter text-orange-dark',
danger: 'bg-red-lighter text-red-dark',
info: 'bg-blue-lighter text-info-blue-dark',
},
},
outlined: {
base: 'bg-gray-0 border font-medium',
color: {
DEFAULT: 'border-gray-900 text-gray-900',
primary: 'border-primary-dark text-primary-dark',
secondary: 'border-secondary-dark text-secondary-dark',
success: 'border-green-dark text-green-dark',
warning: 'border-orange-dark text-orange-dark',
danger: 'border-red-dark text-red-dark',
info: 'border-blue-dark text-blue-dark',
},
},
},
};
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
content?: ReactNode;
color?: keyof typeof classes.variant['solid']['color'];
variant?: keyof typeof classes.variant;
size?: keyof typeof classes.size | keyof typeof classes.dot.size;
dotSize?: keyof typeof classes.dot.size;
rounded?: keyof typeof classes.rounded;
dot?: boolean;
}
/**
* Bedge is a small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
* You can use props like `id`, `title` etc.
*/
const Badge = ({
content,
color = 'DEFAULT',
variant = 'solid',
children,
className,
size = 'DEFAULT',
dot = false,
rounded = 'full',
...props
}: BadgeProps) => {
const styles = classes.variant[variant];
return (
<span
className={clsx(
classes.base,
classes.variant[variant],
dot ? classes.dot.size[size] : classes.size[size],
styles.color[color],
styles.base,
classes.rounded[rounded],
className,
{ ...props }
)}
>
{content}
{children}
</span>
);
};
Badge.displayName = 'Badge';
export default Badge;
<div class="my-4" style="align-items: center; display: flex">
<span
class="base bg-gray-900 color font-medium hover:enabled:bg-gray-1000 inline-flex items-center justify-center leading-none mr-4 px-2.5 py-1 rounded rounded-full text-sm text-white"
style="display: inline-block"
>Default</span
><span
class="flex items-center justify-center font-medium leading-none base color px-2.5 py-1 text-sm bg-primary-light text-white rounded-full mr-4 flex inline-flex rounded"
>Primary</span
><span
class="flex items-center justify-center font-medium leading-none base color px-2.5 py-1 text-sm bg-secondary-light text-white rounded-full mr-4 flex inline-flex rounded"
>Secondary</span
><span
class="flex items-center justify-center font-medium leading-none base color px-2.5 py-1 text-sm bg-green-light text-white rounded-full mr-4 flex inline-flex rounded"
>Success</span
><span
class="flex items-center justify-center font-medium leading-none base color px-2.5 py-1 text-sm bg-red-light text-white rounded-full mr-4 flex inline-flex rounded"
>Danger</span
><span
class="flex items-center justify-center font-medium leading-none base color px-2.5 py-1 text-sm bg-orange-light text-white rounded-full mr-4 flex inline-flex rounded"
>Warning</span
><span
class="flex items-center justify-center font-medium leading-none base color px-2.5 py-1 text-sm bg-blue-light text-white rounded-full mr-4 flex inline-flex rounded"
>Info</span
>
</div>