SVG latency icon using tailwind utilities

LatencyIcon.js

const LatencyIcon = ({ latency }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="inline-block h-5 w-5 text-gray-800"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        className={
          latency < 200
            ? "text-green-400"
            : latency < 500
            ? "text-yellow-400"
            : latency < 1000
            ? "text-red-400"
            : ""
        }
        d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5z"
      />
      <path
        className={
          latency < 200
            ? "text-green-400"
            : latency < 500
            ? "text-yellow-400"
            : ""
        }
        d="M8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
      />
      <path
        className={latency < 200 ? "text-green-400" : ""}
        d="M14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
      />
    </svg>
  );
};

export default LatencyIcon;