./src/components/Combine.

js

import React, { useState } from 'react';

import './combine.css'; // Import the CSS file

const Combine = () => {

const [isLogin, setIsLogin] = useState(true);

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const [cfPassword, setCfPassword] = useState('');

const [error, setError] = useState('');

const [forgotPassword, setForgotPassword] = useState(false);

const handleLoginSubmit = (e) => {

e.preventDefault();

console.log('Logging in with:', { email, password });

};

const handleSignupSubmit = (e) => {

e.preventDefault();

if (password !== cfPassword) {

setError('Passwords do not match');

return;

}else{

setError('');

console.log('Signing up with:', { email, password });

};

return (
<div className="container">

<button onClick={() => setIsLogin(true)}>Login</button>

<button onClick={() => setIsLogin(false)}>Signup</button>

{isLogin ? (

<div>

<h1>Login Form</h1>

<form onSubmit={handleLoginSubmit}>

<div>

<label htmlFor="email">Email</label>

<input

type="email"

id="email"

name="email"

value={email}

onChange={(e) => setEmail(e.target.value)}

required

/>

</div>

<div>

<label htmlFor="password">Password</label>

<input

type="password"

id="password"

name="password"

value={password}

onChange={(e) => setPassword(e.target.value)}

required

/>
 </div>

<a href="#" onClick={() =>

<button type="submit">Login</button>

Not a member?<a href="#" onClick={() =>

</form>

</div>

):(

<div>

<h1>Signup Form</h1>

<form onSubmit={handleSignupSubmit}>

<div>

<label htmlFor="email">Email</label>

<input

type="email"

id="email"

name="email"

value={email}

onChange={(e) => setEmail(e.target.value)}

required

/>

</div>

<div>

<label htmlFor="password">Password</label>

<input

type="password"

id="password"

name="password"

value={password}
 onChange={(e) => setPassword(e.target.value)}

required

/>

</div>

<div>

<label htmlFor="cfPassword">Confirm
Password</label>

<input

type="password"

id="cfPassword"

name="cfPassword"

value={cfPassword}

onChange={(e) => setCfPassword(e.target.value)}

required

/>

</div>

{error && <p className="error">{error}</p>}

<button type="submit">Signup</button>

</form>

</div>

)}

</div>

);

};

export default Combine;

./src/components/combine.css

.container {
 max-width: 400px;

margin: 50px auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 8px;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

background-color: #fff;

h1 {

text-align: center;

margin-bottom: 20px;

button {

width: 100%;

padding: 10px;

margin-top: 10px;

background-color: #007BFF;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

button:hover {

background-color: #0056b3;

}
form {

display: flex;

flex-direction: column;

div {

margin-bottom: 15px;

label {

margin-bottom: 5px;

font-weight: bold;

input {

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

input:focus {

border-color: #007BFF;

outline: none;

a{

display: block;

text-align: center;
 margin-top: 10px;

color: #007BFF;

text-decoration: none;

a:hover {

text-decoration: underline;

.error {

color: red;

text-align: center;

./src/app.js

import Combine from './components/Combine';

function App() {

return (

<div className="App">

<Combine/>

</div>

);

export default App;