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