JSFiddle - React, Tailwind, and code Playground

by pichowskii

HTML

<div class="form-wrapper">
		<div class="container">
			<div class="col-md-12">
				<h2 class="enter"><strong>Enter the system</strong></h2>
				<p>It is necessary to login in Your account in order to sign in for a course</p>

				<section class="contact-form">
					<form action="" method="post" class="contact-form" role="form">
						<div class="col-md-4">
							<h5 class="formTitle"><span class="grey">Are new?</span> Register</h5>

							<label class="span4">
								<input type="text" name="uname" class="form-control" placeholder="User name" required="required">
							</label>
							<label class="span4">
								<input type="email" name="email" class="form-control" placeholder="Email" required="required">
							</label>
							<label class="span4">
								<input type="password" name="password" class="form-control" placeholder="Password" required="required">
							</label>
							<label class="span4">
								<input type="password" name="confPassword" class="form-control" placeholder="Confirm Password" required="required">
							</label>
							<div class="buttonRow col-md-6 pull-right">
								<input type="submit" class="signUp2" value="Register">
							</div>
						</div> 
					</form>
				</section><!-- END Register form -->

				<div class="col-md-4 login-form">
					<form action="" class="contact-form login">
						<h5 class="formTitle2"><span>Already a student? Login</span></h5>

						<label class="span4 username">
							<input type="text" name="uname" class="form-control" placeholder="User name" required="required">
						</label>
						<label class="span4 password">
							<input type="password" name="password" class="form-control" placeholder="Password" required="required">
						</label>
						<div class="rowForm moreSpace">
							<div class="pull-left">
								<div id="checkbox-login" class="checked">
									<input type="checkbox" id="login-checkbox">
									<label for="login-checkbox" class="chkBox">Remember...

CSS

body {
	font-family: Tahoma;
	font-size: 18px;
}

label, 
input, 
button, 
select, 
textarea {
	font-size: 13px;
	font-weight: normal;
	line-height: 22px;
}

.form-wrapper {
	background-color: #eee;
	margin-top: -10px;
	padding: 1px;
	min-height: 550px;
}

.container {
	width: 960px;
	margin: 0 auto;
}

h2.enter {
	color: #234465;
}

.col-md-4 {
	width: 33.33333333%;
	margin-top: 30px;
}

.col-md-6 {
	width: 50%;
}

.col-md-12 {
	width: 100%;
}

.col-md-4, 
.col-md-12 {
	float: left;
}

.formTitle {
	font-size: 16px;
	color: #234465;
	text-transform: uppercase;
	font-weight: bold;
}

	.formTitle .grey {
		color: #666 !important;
	}

.formTitle,
.formTitle2 {
	margin-top: 0;
}

.formTitle2 {
	color: #fff;
	text-transform: uppercase;
}

.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.contact-form input, 
.registerForm input[type="text"], 
.registerForm input[type="password"], 
input[type="text"], 
input[type="password"],  
input[type="email"] {
	height: 41px;
	width: 100%;
	padding: 11px 10px 13px 10px;
	line-height: 17px !important;
	margin: 0 0 15px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.login-form {
	background: #234465;
	padding: 25px;
	margin-left: 15px;
}

input#login-checkbox {
	height: 20px;
	width: 20px;
	margin-right: 5px;
}

label.chkBox {
	min-height: 0 !important;
	line-height: 20px;
	color: #fff;
}

.pull-right {
	float: right;
}

#submit a {
	color: #fff;
	text-decoration: none;
	display:...