Input

export default function Component() {
  return (
    <div className="max-w-xl mx-auto px-4 sm:px-0">
  <label
    className="block text-gray-500 dark:text-gray-400 text-sm font-medium mb-2"
  >
    Business Inquiry
  </label>

  <div className="relative">
    <input
      aria-label="Business contact input"
      placeholder="Enter your business email"
      className="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 hover:border-gray-400 dark:hover:border-gray-500 shadow-sm"
      name="business-email"
      type="email"
    />

    <div
      className="absolute inset-y-0 right-3 flex items-center pointer-events-none"
    >
      <svg
        stroke="currentColor"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="h-5 w-5 text-gray-400 dark:text-gray-500"
      >
        <path
          d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
          stroke-width="2"
          stroke-linejoin="round"
          stroke-linecap="round"
        ></path>
      </svg>
    </div>
  </div>

  <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
    We'll never share your information with others.
  </p>
</div>
  );
}