input tag style adjust

src/components/GetLoan.jsx

@@ -58,7 +58,7 @@ export default function GetLoan() {
 
   return (
     <div className={`flex flex-col items-center justify-center`}>
-        <div className='relative flex flex-col gap-4 w-[80%] sm:w-[400px] min-h-[600px] bg-white rounded-xl p-4 sm:p-8 shadow'>
+        <div className='relative flex flex-col gap-4 w-[80%] sm:w-[400px] h-[600px] bg-white rounded-xl p-4 sm:p-8 shadow'>
             <div className="relative pb-3 card-title w-full border-b-2 flex gap-4 items-center">
               <div className='absolute left-2 top-1/2 -translate-y-1/2 p-1 cursor-pointer' onClick={handleBackBtn}>
                 <IoIosArrowBack className='text-3xl sm:text-5xl font-bold text-orange-500 cursor-pointer' />
@@ -102,7 +102,7 @@ export default function GetLoan() {
                   }
                 </div>
                 {products &&
-                <div className='mt-3 w-full'>
+                <div className='mt-3 w-full h-full flex flex-col justify-end'>
                   <button onClick={()=>console.log('working')} className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Pay Loan</button>
                 </div>
                 }

src/components/InputText.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 export default function InputText({id, name, type='text', value, handleChange}) {
   return (
     <div className='w-full h-12 round overflow-hidden'>
-        <input id={id} name={name} type={type} value={value} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-black rounded' />
+        <input id={id} name={name} type={type} value={value} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-400 focus:border-purple-600 rounded' />
     </div>
   )
 }

src/components/auth/LoginCom.jsx

@@ -62,7 +62,7 @@ export default function LoginCom() {
       <PageLoader />
       :
       <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/first-background.jpg')] bg-cover bg-center bg-no-repeat`}>
-        <div className='flex flex-col gap-4 w-[80%] sm:w-[500px] bg-white rounded-xl p-3 sm:p-5 shadow'>
+        <div className='flex flex-col gap-4 w-[80%] sm:w-[500px] bg-white rounded p-5 sm:p-[30px] shadow'>
           <div className='text-input'>
             <Label name='Username' htmlfor='username' />
             <InputText id='username' name='username' value={fields.username} handleChange={handleChange} />
@@ -81,7 +81,7 @@ export default function LoginCom() {
           }
 
           <div className='mt-5 flex justify-end items-center'>
-            <button onClick={()=>{login.mutate(fields)}} disabled={login.isPending} className='px-3 py-2 bg-purple-800 text-white font-bold rounded'>{login.isPending ? 'loading...' : 'Login'}</button>
+            <button onClick={()=>{login.mutate(fields)}} disabled={login.isPending} className='px-4 py-1 bg-purple-800 text-white font-bold rounded'>{login.isPending ? 'loading...' : 'Login'}</button>
           </div>
         </div>
       </div>