Tailwind + React Patterns

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs) {
  return twMerge(clsx(inputs));
}

function Badge({ active, children }) {
  return (
    <span className={cn(
      "rounded-full px-3 py-1 text-xs font-medium",
      active
        ? "bg-cyan-100 text-cyan-700"
        : "bg-slate-100 text-slate-600"
    )}>
      {children}
    </span>
  );
}