React Project | How to Make Login & Sign Up Form in React JS | ReactJS Login & Registration Form |

Опубликовано: 12 Октябрь 2024
на канале: Yoshita Jain

7,610

238

Hi People,
In this video we will learn how to make login & sign up form in React.js. We will create a button to switch between login and registration form.

CSS-
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #0C67A0;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}

.form-container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
}

.form-toggle {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}

.form-toggle button {
width: 50%;
padding: 10px;
background-color: #f3f3f3;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 10px 10px 0 0;
}

.form-toggle .active {
background-color: #033452;
color: white;
}

.form {
display: flex;
flex-direction: column;
}

.form h2 {
margin-bottom: 20px;
}

.form input {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

.form button {
padding: 10px;
background-color:#033452;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.form a {
color: #007bff;
text-decoration: none;
margin-bottom: 10px;
text-align: right;
}

.form p {
text-align: center;
}

**********************************************************
#beginners #coding #programming
Follow me on Social Platforms
Instagram - / jainyy.08
LinkedIn- / yoshita-jain-510893148

Thank you guys for your support, subscribe ‪@yoshitajain0812‬
Love,
Yoshita :)