A simple dev indicator for React using TailwindCSS

dev-indicator.tsx

const isDev = process.env.NODE_ENV === "development";

const DevIndicator = () => {
  if (!isDev) {
    return null;
  }

  return (
    <>
      <div className="w-full h-full fixed ring-4 opacity-80 ring-orange-300 ring-inset z-[9999]"></div>
      <div className="fixed bottom-4 opacity-80 left-4 py-1 px-2 bg-orange-300 ring-1 ring-orange-400 text-orange-600 rounded z-[9999]">
        <span className="font-mono text-sm font-bold">DEV MODE</span>
      </div>
    </>
  );
};

export default DevIndicator;