Refactor tailwind code to be more consistent

[Comeza]

Currently we use many anti-patterns throughout the entire code base.

I recommend to use some idioms from those blog posts:

• https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css
• https://blog.logrocket.com/building-reusable-react-components-using-tailwind-css/

Such as:

• Well-defined staes instead of bool-based states
• Disallow className in custom components as props (using `Omit<Reac.ComponentProps<'button'>, 'className'>
• Prefer global state over local state
• Prefer props over state
• Prefer no props over props
  • Prefer component over props
  • Prefer children over props
• using the ReactComponent#defaultPropos field
• Keep class ordering (maybe there is a eslint rule for that)
• Use tailwind themes for a consistent color scheme Use tailwind thems for more consistent styling #30

Finally I think writing style variants in maps is a good pattern.

const VARIANT_MAPS: Record<BadgeVariant, string> = {
  [BadgeVariant.ERROR]: 'bg-red-100 text-red-800',
  [BadgeVariant.NOTE]: 'bg-yellow-100 text-yellow-800',
  [BadgeVariant.SUCCESS]: 'bg-green-100 text-green-800',
  [BadgeVariant.INFO]: 'bg-blue-100 text-blue-800',
};