JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<title>Login Form</title>
	<link rel="stylesheet" href="style.css">

</head>
<body>
<div id="wrapper">
	<h2>Step 1: Your details</h2>
		<div class="box">
			<span>User</span>
			<input type="text" name="username" placeholder="First and last name">
		</div>
		<div class="box">
			<span>Email</span>
			<input type="email" name="email" placeholder="example@domain.com">
		</div>
		<div class="box">
			<span>Phone</span>
			<input type="text" name="phone" placeholder="eg. +44750000000">
		</div>
	<h2>Step 1: Delivery adress</h2>
		<div class="box">
			<span id="specific">Adress</span>
			<textarea></textarea>
		</div>
		<div class="box">
			<span>Post Code</span>
			<input type="text" name="post-code">
		</div>
		<div class="box">
			<span>Country</span>
			<input type="text" name="country">
		</div>
		<h2>Step 1: Card details</h2>
		<div class="box">
			<span>Card type</span> 
				<div id="cards">
					<input type="radio" name="visa" id="visa"> <!-- <span id="visa"></span> -->
				</div>


		</div>

</div>

</body>
</html>

CSS

body {
	background-image: url('img/formBackground.jpg');
	background-repeat: no-repeat;
	
}

#wrapper {
	width: 420px;
	height: 900px;
	margin:  20 auto;
}

h2 {
	color: white;
	font-family: Verdana;
	font-size: 18px;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 0px;
}

.box {
	padding: 10px;
	margin: 5px;
	margin-bottom: 2px;
	margin-top: 2px;
	border: 1px solid rgb(210,210,210);
	border-radius: 5px;
	background-color: rgba(255,255,255,0.2) ;
}
.box span {
	display: inline-block;
	width: 100px;
	height: 18px;
}

.box input {
	width: 210px;
	margin: 0 auto;
	padding: 4px;
}

.box textarea{
	width: 210px;
	height: 130px;
	max-width: 210px;
}

#specific{
	height: 100px;
	vertical-align: top;
	padding-top: 5px;
	padding-left: 5px;
}

::-webkit-input-placeholder {
   color: grey;
}

:-moz-placeholder { /* Firefox 18- */
   color: grey; 
}

::-moz-placeholder {  /* Firefox 19+ */
   color: grey;  
}

:-ms-input-placeholder {  
   color: grey; 
}

#visa:after {
	content: '';
	display: block;
	width: 32px;
	height: 28px;
	background: url('img/Farm-Fresh_visa.png');

}