Add hover and active states

src/app.jsx

@@ -1,44 +1,37 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
 
+const InputField = ({ label, type = "text", required = false, ...props }) => {
+  return (
+    <label className="group block cursor-pointer space-y-100">
+      <div className="space-x-100">
+        <span className="text-body-sm text-grey-900 group-focus-within:text-green-600">
+          {label}
+        </span>
+        {required && <span className="text-body-sm text-green-600">*</span>}
+      </div>
+      <input
+        className="block w-full cursor-pointer rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md focus:border-green-600 group-hover:border-green-600"
+        name={label.toLowerCase().replace(/ /g, "_")}
+        required={required}
+        type={type}
+        autoComplete="off"
+        {...props}
+      />
+    </label>
+  );
+};
+
 export default () => {
   return (
     <div className="min-h-dvh bg-green-200 px-200 py-400">
       <div className="rounded-2xl bg-white p-300 text-grey-900">
+        <form action="">
           <h1 className="text-heading">Contact Us</h1>
 
           <div className="mt-400 space-y-300">
-          <div className="space-y-100">
+            <InputField label="First Name" required />
-            <div className="space-x-100">
+            <InputField label="Last Name" required />
-              <label className="text-body-sm">First Name</label>
+            <InputField label="Email Address" type="email" required />
-              <span className="text-body-sm text-green-600">*</span>
-            </div>
-            <input
-              className="block w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md"
-              type="text"
-            />
-          </div>
-
-          <div className="space-y-100">
-            <div className="space-x-100">
-              <label className="text-body-sm">Last Name</label>
-              <span className="text-body-sm text-green-600">*</span>
-            </div>
-            <input
-              className="block w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md"
-              type="text"
-            />
-          </div>
-
-          <div className="space-y-100">
-            <div className="space-x-100">
-              <label className="text-body-sm">Email Address</label>
-              <span className="text-body-sm text-green-600">*</span>
-            </div>
-            <input
-              className="block w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md"
-              type="text"
-            />
-          </div>
 
             <div className="space-y-200">
               <div className="space-x-100">
@@ -49,21 +42,24 @@ export default () => {
               <RadioGroup.Root className="space-y-200" name="query_type">
                 {["General Enquiry", "Support Request"].map((label) => (
                   <RadioGroup.Item
-                  className="group w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-left data-[state='checked']:border-green-600 data-[state='checked']:bg-green-200"
+                    className="group w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-left hover:border-green-600 data-[state='checked']:border-green-600 data-[state='checked']:bg-green-200"
                     value={label.toLowerCase().replace(/ /g, "_")}
                     key={label}
                   >
                     <label className="flex cursor-pointer items-center justify-start gap-150 hover:text-green-600 group-data-[state='checked']:text-green-600">
-                    <span className="bg-transparent relative size-300 rounded-full border-2 border-solid border-grey-500 group-data-[state='checked']:border-green-600">
+                      <span className="relative size-300 rounded-full border-2 border-solid border-grey-500 bg-transparent group-data-[state='checked']:border-green-600">
-                      <span className="bg-transparent absolute left-1/2 top-1/2 size-150 -translate-x-1/2 -translate-y-1/2 transform rounded-full group-data-[state='checked']:bg-green-600"></span>
+                        <span className="absolute left-1/2 top-1/2 size-150 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-transparent group-data-[state='checked']:bg-green-600"></span>
                       </span>
+                      <span className="text-body-md text-grey-900 group-hover:text-green-600 group-data-[state='checked']:text-green-600">
                         {label}
+                      </span>
                     </label>
                   </RadioGroup.Item>
                 ))}
               </RadioGroup.Root>
             </div>
           </div>
+        </form>
       </div>
     </div>
   );