JSFiddle - React, Tailwind, and code Playground

by pichowskii

HTML

<div class="form-wrapper">
		<div class="container">
			<header>
				<h1>fakebook<sub>&reg;</sub></h1>
				<h2>Registration</h2>
				<h4>It is safe and it will always be!</h4>
			</header>

			<form action="" method="post" class="span5">
				<fieldset>
					<legend>None-Important Information</legend>
					<p>
						<input type="text" name="fName" placeholder="First Name">
						<input type="text" name="lName" placeholder="Last Name">
					</p>
					<p>
						<input type="email" name="email" placeholder="Your Email"> <!-- type="email" not supported by Safari -->
						<input type="text" name="tel" placeholder="Phone Number"> <!-- type="tel" not supported by any browser -->
					</p>
					<p>
						<input type="password" name="password" placeholder="Your Password">
						<input type="url" name="website" placeholder="Your Website"> <!-- type="url" not supported by Safari -->
					</p>
					<p>
						<label for="bDay">Birthday:</label>
						<input type="datetime-local" name="bdaytime"> <!-- type="datetime-local" not supported by IE and FF -->
					</p>
					<p class="sex">
						<input type="radio" name="sex" value="male" id="male">
						<label for="male">Male</label>
						<input type="radio" name="sex" value="female" id="female">
						<label for="female">Female</label>
						<input type="radio" name="sex" value="other" id="other">
						<label for="other">Other</label>
					</p>
				</fieldset>
				<input type="reset" value="Clear Form">
			</form>

			<form action="" method="get" class="span6">
				<fieldset>
					<legend>Important Information *required</legend>
					<p>
						<select name="country" id="country">
							<option value="" disabled="disabled" selected="selected">Country</option>
							<option value="bg">Bulgaria</option>
							<option value="fr">France</option>
							<option value="it">Italy</option>
							<option value="sp">Spain</option>
						</select>
						<input type="text" name="village" placeholder="Village"...

CSS

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

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

label {
	display: block;
}

.form-wrapper {
	background-color: #3b5997;
	margin-top: -10px;
	padding: 1px;
	color: #fff;
	min-height: 700px;
}

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

.span5 {
	width: 37%;
	float: left;
}

.span6 {
	width: 60%;
	float: left;
}

header,
form fieldset legend {
	text-align: center;
}

	header h1 {
		font-size: 5em;
		margin-bottom: 0;
	}

		header h1 sub {
			font-size: 0.3em;
		}

form fieldset {
	border-radius: 10px;
}

	form fieldset input {
		border-radius: 5px;
	}

	form fieldset select,
	textarea {
		padding: 5px;
		border-radius: 5px;
	}

	form p {
		margin: 4px 0;
	}

form.span6 {
	margin-left: 25px;
}

p.sex {
	padding-bottom: 51px;
}

	p.sex label {
		display: inline-block;
	}

input[type="reset"],
input[type="submit"] {
	padding: 15px;
	width: 100%;
	border-radius: 10px;
	color: #536da2;
	background-color: #ddd;
	font-size: 18px;
	margin-top: 15px;
	outline: 0;
}

input[type="reset"]:hover,
input[type="submit"]:hover,
form fieldset select:hover {
	cursor: pointer;
}

input[type="color"],
select#country {
	width: 27%;
}

input.xs {
	width: 15%;
}