update App.js, src/components/FormInput/index.js and src/components/TestComponentNew/index.js

src/App.js

@@ -271,7 +271,7 @@ function App() {
         {/* <LeafletMap /> */}
 
         {/* <Digikala /> */}
-        <TestComponentNew />
+        {/* <TestComponentNew /> */}
       </div>
     </Provider>
   );

src/components/FormInput/index.js

@@ -6,25 +6,22 @@ import Input from "./Input";
 const FormInput = () => {
   const { register, getValues } = useForm();
   return (
-    <div className="mx-72 mt-20 flex flex-row items-center justify-between divide-x-4 divide-red-600 divide-dashed divide-x-reverse bg-white p-7 border border-gray-200 rounded-sm shadow-sm">
-      {/* right */}
-      <div className="bg-red-200">
+    <div className="mx-72 mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3]  divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm">
+      <div className="flex-grow px-4">
         <Input
           register={register("firstName")}
           // defaultValue={info?.firstName}
           label="نام "
         />
       </div>
-      {/* middle */}
-      <div>
+      <div className="flex-grow px-4">
         <Input
           register={register("firstName")}
           // defaultValue={info?.firstName}
           label="نام "
         />
       </div>
-      {/* left */}
-      <div>
+      <div className="flex-grow px-4">
         <Input
           register={register("firstName")}
           // defaultValue={info?.firstName}

src/components/TestComponentNew/index.js

@@ -9,7 +9,7 @@ const TestComponentNew = () => {
 
   return (
     <div>
-      <div className="flex mx-auto w-3/5 justify-between divide-x-2 divide-x-reverse bg-red-50">
+      <div className="flex  mx-72 justify-between divide-x-2 divide-x-reverse bg-red-50">
         <div className="flex-grow text-center font-bold bg-blue-400 px-5">
           <Input
             register={register("firstName")}