JSFiddle - React, Tailwind, and code Playground
HTML
<section class="formContainer">
<form id="signUpForm" class="pageForm">
<input type="text" placeholder="Full Name" name="FullName" id="fullName" />
<input type="text" placeholder="Email" name="email" id="email" />
<section id="actionBtnsCont">
<button id="btnSignUp" class="mainBtn" type="button">Sign Up</button>
<label class="genContextLbl">or</label>
<button id="btnSignIn" class="genBtn" type="button">Sign In</button>
</section>
</form>
</section>
CSS
.formContainer {
position: relative;
text-align: center;
top: 10em;
width: 500px;
margin: 0 auto;
}
/********************************************/
/**************SignIn_Page \ SignUp_Page******************/
.formContainer #actionBtnsCont {
display: inline-block;
margin-right: 1em;
}
.formContainer #actionBtnsCont button {
display: block;
width: 450px;
height: 50px;
border-radius: 15px;
cursor: pointer;
box-shadow: none;
}
.mainBtn {
background-color: #7A324F;
color: #ffffff;
margin-top: 2em;
margin-bottom: 1em;
}
.genBtn {
background-color: #D0D1D3;
color: #51617F;
margin-top: 1em;
}
.formContainer #actionBtnsCont .genContextLbl {
color: #51617F;
font-weight: 600;
}
form.pageForm {
margin-top: 2em;
text-align: center;
}
form.pageForm input {
margin-bottom: 1em;
margin-right: 1em;
background-color: transparent;
border-radius: 15px;
width: 400px;
height: 40px;
}
form.pageForm #email {
background: url(https://www.apec-econ.ca/system/style/images/icon-small-person.png) no-repeat scroll 4px 9px;
padding-left: 50px;
}
form.pageForm #fullName {
background: url(https://www.apec-econ.ca/system/style/images/icon-small-person.png) no-repeat scroll 4px 7px;
padding-left: 50px;
}
form.pageForm ::-webkit-input-placeholder {
color: gray;
font-size: 1em;
}