JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<section>
		<div class="container">
			<h1>Enter the System</h1>
			<p>It is necessary to login in Your account in order to sign up for a course</p>
			<div id="RegForm">
				<span class="Reghead LogFormTxt">ARE YOU NEW? <span class="Reghead LogFormTxt" style="color: #2B547E ">REGISTER</span></span>
				<form name="form1" id="id1">
					<input class="formControls activeCls" type="text" name="" placeholder="User name" required><br>
					<input class="formControls activeCls" type="email" name="" placeholder="Email" required><br>
					<input class="formControls activeCls" type="password" name="" placeholder="Passoword" required ><br>
					<input class="formControls activeCls" type="password" name="" placeholder="Confirm Passoword" required><br>
					<button class="formbutton" style="float:right;">Resister</button>
				</form>
			</div>
			<div id="LogForm">
				<span class="LogFormTxt">ALREADY A STUDENT?LOGIN</span>
				<form name="form1" id="id1">
					<input class="formControls" type="text" name="" placeholder="User name"><br>
					<input class="formControls" type="email" name="" placeholder="Password"><br>
				    <input type="checkbox" name="ConfirmChk" value="1"/>Remember me?
					<button class="loginButton" style="float:right;">Login</button><br>
					<div style="position: relative;">
						<a href="" class="forgotPass">Forgot Passoword</a>
					</div>
				</form>
			</div>
		</div>
	</section>

CSS

body
    {
    	font-family: Arial, Helvetica, sans-serif;
    }

	.container
	{
		display: table;
		margin:0 auto;
		background-color: #f7f7f7;
		padding: 20px;
		border-radius: 5px;
	}
	h1
	{
		color:  #2B547E ;
	}
	p
	{
		color:#898989;
	}

	#RegForm, #LogForm{
		margin-right:10px;
		float:left;
		margin: 20px;
	}

	#LogForm
	{
		background-color:  #2B547E ;
		padding: 20px;
		color: white;
		font-weight: bold;
		padding-bottom: 90px;
	}

	.LogFormTxt
	{ 
          color:white;
          font-size: 20px;
		  font-weight: bold;
	}

	.Reghead
	{
		color: #747474;
		font-size: 20px;
		font-weight: bold;
	}

	.formControls
	{
		width: 330px;
		margin: 10px;
		margin-left: 0px;
		height: 20px;
		padding: 5px;
	}

	.activeCls
	{
	    outline:none;
		border:1px solid #dadada;
		border-color:#D7D7D7;
		box-shadow:0 0 10px 2px #FE0C0C;
	}

	.formbutton
	{

		padding-top: 8px;
		padding-bottom:8px;
		padding-right: 30px;
		font-size: 16px;
		font-weight: bold;
		padding-left: 30px;
		color:  #2B547E ;
		border:2px solid  #2B547E ;
	}

	.loginButton
	
	{
		padding-top: 8px;
		padding-bottom:8px;
		padding-right: 30px;
		font-size: 16px;
		font-weight: bold;
		padding-left: 30px;
		color: #fff;
		background-color:  #2B547E ;
		border:2px solid orange;
	}

	.forgotPass
	{
		position:absolute;
		color: white;
		font-size: 10px;
		bottom: -40px;
		right:5px;
	}