Skip to main content

Badge

Code

components/Badge/index.tsx
import type { FC } from 'react'

export interface Props {}

const Badge: FC<Props> = ({ children }) => {
return (
<span className="relative inline-block">
{children}
<span className="flex absolute h-3 w-3 top-0 right-0 -mt-1 -mr-1">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75" />
<span className="relative inline-flex rounded-full h-3 w-3 bg-red-500" />
</span>
</span>
)
}

export default Badge

Props

Example

References

https://tailwindcss.com/docs/animation#ping