Create Badge component

[kirandash]

Design:

Requirements:

• [ ] Props: color?: 'neutral' | 'success' | 'danger' | 'warning', defaults to 'neutral'
• [ ] Styles: I have added the colors below just top of my head, feel free to make adjustments if the final look is not good

  badge: {
  base: 'inline-flex px-2 text-xs font-medium leading-5 rounded-full',
  neutral: 'text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-700',
  success: 'text-primary-tint40 bg-primary-shade60 dark:bg-primary-tint40 dark:text-primary-shade60',
  danger: 'text-red-700 bg-red-100 dark:text-red-100 dark:bg-red-700',
  warning: 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600',
  },

• [ ] Please use span tag as base element for building the badge
• [ ] The component should be extensible. So user should be able className, children and other native HTML props which should be applied to span tag. Already implemented in other components. Please have a look
• [ ] Add unit tests to test the above requirements, please have a look at tests written for other components
• [ ] Add component to storybook