In this article we will design a Responsive Login Form using Only React Js. I am Daman sure you all are familiar with this type of design. However i think there are many beginner who do not know How to Make Responsive Login Form using Only React Js. Hopefully this article will help you out.
If you want you can watch the live demo with this link.
Don't miss this article : link.
if you are a beginner do follow my steps what I am doing to How to Make Responsive Login Form using Only React Js .
Download the source code : link.
App.js
import React from 'react'
const App = () => {
return (
<div className="container">
<div className="wrapper">
<div className="title">
<span>Welcome back</span>
</div>
<p className='title_para'>Please enter your details to sign in.</p>
<form action="#">
<div className="row">
{/* <i className="fas fa-user"></i> */}
<input type="text" placeholder="Enter your email..." required />
</div>
<div className="row">
{/* <i className="fas fa-lock"></i> */}
<input type="password" placeholder="Password" required />
</div>
<div className="pass"><a href="#">Forgot password?</a></div>
<div className="row button">
<input type="submit" value="Login" />
</div>
<div className="signup-link">Not a member? <a href="#">Signup now</a></div>
</form>
</div>
</div>
)
}
export default App
Now lets jump into css part where we write react js and css .
App.css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body {
background: #F2EFEF;
overflow: hidden;
}
::selection {
background: rgba(26, 188, 156, 0.3);
}
.container {
max-width: 440px;
padding: 0 20px;
margin: 170px auto;
}
.wrapper {
width: 100%;
background: #fff;
border-radius: 5px;
/* box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1); */
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.wrapper .title {
height: 90px;
background: #ffffff;
border-radius: 5px 5px 0 0;
color: #151515;
font-size: 25px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.title_para {
display: flex;
align-items: center;
justify-content: center;
position: relative;
bottom: 22px;
color: #7e7e7e;
}
.wrapper form {
padding: 10px 25px 34px 25px;
}
.wrapper form .row {
height: 56px;
margin-bottom: 15px;
position: relative;
}
.wrapper form .row input {
height: 100%;
width: 100%;
outline: none;
padding-left: 20px;
border-radius: 5px;
border: 1px solid lightgrey;
font-size: 16px;
transition: all 0.3s ease;
}
form .row input:focus {
border-color: #16a085;
box-shadow: inset 0px 0px 2px 2px rgba(26, 188, 156, 0.25);
}
form .row input::placeholder {
color: #999;
}
.wrapper form .row i {
position: absolute;
width: 47px;
height: 100%;
color: #fff;
font-size: 18px;
background: #16a085;
border: 1px solid #16a085;
border-radius: 5px 0 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper form .pass {
margin: 4px 4px 23px 4px;
}
.wrapper form .pass a {
color: #16a085;
font-size: 17px;
text-decoration: none;
}
.wrapper form .pass a:hover {
text-decoration: underline;
}
.wrapper form .button input {
color: #fff;
font-size: 20px;
font-weight: 500;
padding-left: 0px;
background: #242526;
border: 1px solid #141414;
cursor: pointer;
}
form .button input:hover {
background: #090909;
}
.wrapper form .signup-link {
text-align: center;
margin-top: 25px;
/* font-size: 17px; */
padding-right: 20px;
}
.wrapper form .signup-link a {
color: #16a085;
text-decoration: none;
}
form .signup-link a:hover {
text-decoration: underline;
}
Conclusion
I hope you enjoyed this little tutorial. Let me know over on
Happy Coding! 😇
Top comments (0)