JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>3S Code</title>
	<!-- <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> -->
	<link rel="stylesheet" href="index.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script src="scripts.js"></script>
</head>
<body>
	<div class="wrapper">
		<div class="card">
			<div id="before">
				<header>
					<h1 class="card-title">3S code</h1>
				</header>
				<section>
					<div class="card-code">
						<label>Orignele code</label>
						<input type="text" class="input-code">
					</div>
					<div class="card-zipcode">
						<label>Postcode</label>
						<div class="card-group">
							<input type="text" class="input-zipcode">
							<button class="btn-postnl" id="bekijken" type="submit">Bekijken</button>
						</div>
					</div>
				</section>
				<footer></footer>
			</div>
			<div id="after">
				<header>
					<h1 class="card-title">Uw pakket is gevonden!</h1>
				</header>
				<section>
					<div class="card-details">
						<div class="details-info">
							<p>3S code</p>
						</div>
						<div class="details-data">
							<p class="postnl_code">3SEBEL3165553</p>
						</div>
					</div>
					<div class="card-details">
						<div class="details-info">
							<p>Status</p>
						</div>
						<div class="details-data">
							<p>Zending bezorgd</p>
						</div>
					</div>
					<div class="card-details">
						<div class="details-info">
							<p>Gewicht</p>
						</div>
						<div class="details-data">
							<p>0,28 kg</p>
						</div>
					</div>
					<div class="card-details">
						<div class="details-info">
							<p>Afmetingen</p>
						</div>
						<div class="details-data">
							<p>5 × 16,5 × 30 cm</p>
						</div>
					</div>
				</section>
				<footer>
					<div class="card-footer">
						<div class="footer-back">
							<a id="back">Ga...

CSS

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400');
* {
	font-family: 'Source Sans Pro', sans-serif;
	padding: 0;
	margin: 0;
	text-align: center;
}

body {
	background-color: #F6F6F6;;
	color: #444;
}

a {
	text-decoration: none;
	color: #fff;
}

input {
	width: 100%;
	height: 40px;
	border-radius: 3px;
	outline: none;
	text-indent: 10px;
	text-align: left;
	border: 1px solid #B1B1B1;
	box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,.1);
	color: #444;
}

input[type="text"] {
	font-size: 20px;
	margin-bottom: 10px;
}

input:focus {
	border: 1px solid #ed8c00;
}

.active {
	border: 1px solid #ed8c00;
}

label {
	display: block;
	text-align: left;
	margin-bottom: 5px;
}

#before section {
	margin: 20px 0 0 0;
}

#after section {
	margin: 20px 0 160px 0;
}

.wrapper {
	width: 100%;
	height: auto;
	display: flex;
}

.card {
	width: 100%;
	height: auto;
	box-shadow: 1px 2px 2px #888;
	border-radius: 3px;
	background-color: #fff;
	padding: 20px;
	margin: auto;
	margin-top: 150px;
	max-width: 350px;
}

.card-title {
	text-align: left;
}

.card-group {
	display: flex;
	justify-content: space-between;
}

.card-group input {
	width: auto;
}

.btn-postnl {
	display: inline-block;
	position: relative;
	height: 40px;
	width: auto;
	margin: 0;
	padding: 0 20px;
	vertical-align: top;
	border: 1px solid rgba(0, 0, 0, 0);
	background-color: #ED8C00;
	-webkit-appearance: none;
	outline: 0;
	line-height: 38px;
	font-size: 1em;
	font-weight: 300;
	color: #FFF;
	cursor: pointer;
	-webkit-transition: all .1s ease-out 0s;
	transition: all .1s ease-out 0s;
	border-radius: 3px;
}

#after {
	display: none;
}

.card-footer a {
	color: #ed8c00;
	cursor: pointer;
}

.card-footer a:hover {
	text-decoration: underline;
}

.card-details p {
	display: flex;
	padding: 5px;
}

.details-info {
	width: 60%;
	float: left;
}

.details-data {
	width: 40%;
	float: left;
}

.postnl_code {
	color: #ed8c00;
}

.footer-back {
	width: 30%;
	float: left;
}

.footer-add {
	width:...