JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="wrapper">
<div id="header">
<div id="logo_wrapper">
<span class="logonaam1">O</span><span class="logonaam2">b</span><span class="logonaam1">l</span><span class="logonaam2">e</span><span class="logonaam1">c</span><span class="logonaam2">t</span><span class="logonaam1">a</span><span class="logonaam2">r</span><span class="logonaam1">e</span>
</div>
<div id="aanmeldform_submit">
<input type="submit" name = "submit" value="Aanmelden" id="submit_knop" />
</div>
<div id="aanmeldform_wachtwoord">
<input type="password" name = "password" value="" id="aanmeld_wachtwoord_knop" maxlenght='50' required placeholder="Voer je wachtwoord in" />
</div>
<div id="aanmeldform_email">
<input type="email" name = "inlog_email" value="" id="aanmeld_email_knop" maxlenght='50' required placeholder="Voer je e-mail in" autofocus/>
</div>
</div>
<div id="register_wrapper">
<h1>Registreren</h1>
<form class="registratie_form" id ="register-form" action="register.php" method="post" novalidate="novalidate" >
<input type="text" id="voornaam" name="voornaam" required placeholder="Jouw voornaam" maxlenght='50' pattern="[A-Za-z]{2,}">
<input type="text" id="achternaam" name="achternaam" required placeholder="Jouw achternaam" maxlenght='50' pattern="[A-Za-z]{4,}">
</form>
</div>
</div>
</body>
CSS
#wrapper {
margin-right: auto;
margin-left: auto;
width: 800px;
height: 100px;
}
#header {
margin-right: 0;
margin-left: 0;
width: 800px;
height: 100px;
background-color: #0066FF;
display: table-cell;
vertical-align: middle;
}
/*Code for LOGO */
#logo_wrapper {
padding-left: 20px;
width: 85px;
height: 25px;
padding-right: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
float: left;
}
.logonaam1 {color: orange; font-family: "Arial Rounded MT Bold"; font-size: 25px;}
.logonaam2 {color: White; font-family: "Arial Rounded MT Bold"; font-size: 25px;}
/*-----------------------*/
/*Code for form above, which is good */
#aanmeldform_submit {
width: 100px;
height: 30px;
padding-right: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
float: right;
}
#aanmeldform_wachtwoord {
width: 150px;
height: 30px;
padding-right: 10px;
text-align: center;
display: table-cell;
vertical-align: middle;
float: right;
}
#aanmeldform_email {
width: 150px;
height: 30px;
padding-right: 10px;
text-align: center;
display: table-cell;
vertical-align: middle;
float: right;
}
#submit_knop {
width: 100%;
height: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
font-size: 13px;
background-color: green;
border-radius:15px;
outline:none;
color:#FFFFFF;
cursor:hand;
cursor:pointer;
}
#aanmeld_email_knop {
width: 100%;
height: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
font-size: 13px;
}
#aanmeld_wachtwoord_knop {
width: 100%;
height: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
font-size: 13px;
}
input[type="submit"]:hover{
border-style:double;
...