JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="header">Fakebook<span id="regmark">&#174;</span></div>
	<h1>Registration</h1>
	<h2>It is safe and will always be!</h2>
	<div id="left">
		<form method="post">
			<fieldset>
				<legend>None-Important Information</legend>
				<input type="text" id="frstName" name="frstName" placeholder="First Name"/>
				<input type="text" id="lastName" name="lastName" placeholder="Last Name"/>
				<br />
				<input type="email" name="emailfld" placeholder="Email"/>
				<input type="tel" name="telField" placeholder="Phone"/>
				<br />
				<input type="password" name="pwdfield" placeholder="Password"/>
				<input type="url" name="yowebs" placeholder="Website"/>
				<br />
				<span>Birth date:</span>
				<br />
				<input type="datetime-local" name="birthday"/>
				<br />
				<label for="female">Female</label>
				<input type="radio" name="gender" value="female"/>
				<label for="male">Male</label>
				<input type="radio" name="gender" value="male"/>
				<label for="other">Other</label>
				<input type="radio" name="gender" value="other"/>
			</fieldset>
		</form>
	</div>
	
	<div id="right">
		<form method="post">
			<fieldset>
				<legend>Important Information *required</legend>
				<select>
					<option value="" selected disabled >Country</option>
					<option value="eng">England</option>
					<option value="usa">USA</option>
					<option value="sudan">Sudan</option>
					<option value="bul">Bulgaria</option>
				</select>
				<input type="text" name="village" placeholder="Village"/>
				<input type="text" name="district" placeholder="District"/>
				<br />
				<input type="text" name="street" placeholder="Street"/>
				<input type="text" class="smallTxtF" name="strNum" placeholder="&#8470;"/>
				<input type="text" class="smallTxtF" name="floor" placeholder="Floor"/>
				<input type="text" class="smallTxtF" name="apt" placeholder="Apt"/>
				<br />
				<label for="doorColor">Door Color:</label> <br />
				<input type="color" name="doorColor"/>
				<input...

CSS

body {
	background:#375794;
	color:white;
	width:100%;
}

#header {
	position:relative;
	margin:auto;
	font-size:120px;
	font-family:serif;
	text-align:center;
}

#regmark {
	font-size:25px;
}

h1, h2 {
	
	text-align:center;	
}

#left {
	display: inline-block;
	width:400px;
	height:260px;
	border-radius:8px;
	margin-left: 80px;
	vertical-align: top;
}

legend {
	text-align:center;
	font-size:20px;
}

input[type="text"]:not(.smallTxtF), [type="email"], [type="url"], [type="tel"], [type="password"], [type="datetime-local"], select,
input[type="color"], [type="number"] {
	position:relative;
	left:20px;
	width:170px;
	height:30px;
	border-radius:5px;
	font-size:20px;
	margin-bottom:10px;
}

span {
	font-weight:bold;
	margin-left:20px;
}

input[type="datetime-local"] {
	width:300px;
	
}

input[type="radio"] {
	margin-left:20px;
	
}

label {
	margin-left:20px;
	margin-right:-20px;
	font-weight:bold;
}

#right {
	vertical-align: top;
	margin-left: 50px;
	height:260px;
	width:600px;
	border-radius:5px;
	display:inline-block;
}

.smallTxtF {
	position:relative;
	left:20px;
	width:100px;
	height:30px;
	border-radius:5px;
	font-size:20px;
	margin-bottom:10px;
}

input[type="number"] {
	position:relative;
	left:20px;
	bottom:3px;
}

textarea {
	margin-left:20px;
	border-radius:5px;
	resize:none;
	width:522px;
}

#buttons {
	position:relative;
	top:40px;
	left:130px;
}

input[type="submit"], [type="reset"] {
	width:300px;
	height:80px;
	border-radius:5px;
	font-size:25px;
	color:#CC9966;
}
input[type="submit"] {
	position:relative;
	left:260px;
}