Text Field

return function TextField() {
  return (
    <div className="grid w-full max-w-md gap-5">
      <div>
        <label htmlFor="tf-email" className="mb-1.5 block text-sm font-medium text-gray-800">
          メールアドレス
        </label>
        <input
          id="tf-email"
          type="email"
          placeholder="you@example.com"
          className="block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 shadow-sm outline-none transition placeholder:text-gray-400 focus:border-amber-500 focus:ring-2 focus:ring-amber-200"
        />
        <p className="mt-1.5 text-xs text-gray-500">お返事はこのアドレスに送られます。</p>
      </div>
      <div>
        <label htmlFor="tf-name" className="mb-1.5 block text-sm font-medium text-gray-800">
          会社名
        </label>
        <input
          id="tf-name"
          type="text"
          defaultValue="First CH"
          aria-invalid="true"
          aria-describedby="tf-name-error"
          className="block w-full rounded-lg border border-red-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 shadow-sm outline-none transition focus:border-red-400 focus:ring-2 focus:ring-red-100"
        />
        <p id="tf-name-error" className="mt-1.5 text-xs text-red-600">
          法人格(合同会社など)まで入力してください。
        </p>
      </div>
    </div>
  );
}