App.jsx

import { useState } from 'react';
import './App.css'

function App() {
  const[isLogin,setIsLogin]= useState(true);
  return (
 <>
    <div className='container'>
      <div className='form-container'>
        <div className='form-toggle'>
          <button className={isLogin? 'active': ""} onClick={()=>setIsLogin(true)}>Login</button>
          <button className={!isLogin? 'active': ""} onClick={()=>setIsLogin(false)}>SignUp</button>
        </div>
        {isLogin? <>
        <div className='form'>
          <h2>LOGIN FORM</h2>
          <input type='email' placeholder='Email'/>
          <input type='password' placeholder='Password'/>
          <button>LOGIN</button>
          <p>Not a member? <a onClick={()=>setIsLogin(false)}>Signup</a></p>
        </div>
        </> : <>
        <div className='form'>
          <h2>SIGNUP FORM</h2>
          <input type='email' placeholder='Email'/>
          <input type='password' placeholder='password'/>
          <button>SignUp</button>
        </div>
        </>}
      </div>
    </div>
 </>
  );
}

export default App;