Issue 11: Create Badge Component

[Manuel-Suarez-Abascal]

PR changes:

• [X] Add Props: color?: 'neutral' | 'success' | 'danger' | 'warning', defaults to 'neutral'.

• [X] Styles: I have added the colors below just on 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',
  },

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

Visual Changes:

Test passing:

Small issue:

For the danger styles: text-red-700 bg-red-100 dark:text-red-100 dark:bg-red-700, I had to use bg-red instead 'cause Tailwind styles don't get injected for some strange reason. Also text-red-700 doesn't work. If you find a workaround, I am happ to push the changes @kirandash