JSFiddle - React, Tailwind, and code Playground

HTML

<div class="faq-box">
<form id="page-faq-form" onsubmit="document.getElementById('faq2_submit').disabled = true" action="/test/faq?question=eva&send=1" method="post">
<label class="i-question-label" for="i-question2">Gib hier deine Frage ein</label>
<textarea id="i-question2" required="required" type="search" name="question">eva</textarea>
<h4>WHY IS THE TOP ONE WORKING, BUT THE LOWER ONE ISN'T?</h4>
<div class="d-faq-field">
<label class="i-faq-firstname-label" for="i-faq-firstname">Vorname</label>
<input id="i-faq-firstname" type="text" name="firstname">
</div>
<div class="d-faq-field">
<label class="i-faq-lastname-label" for="i-faq-lastname">Nachname</label>
<input id="i-faq-lastname" type="text" name="lastname">
</div>
<div class="d-faq-field">
<label class="i-faq-email-label" for="i-faq-email">E-Mail</label>
<input id="i-faq-email" type="text" name="email">
</div>
<div class="d-faq-field d-faq-zip">
<label class="i-faq-zip-label" for="i-faq-zip">PLZ</label>
<input id="i-faq-zip" type="text" name="zip" maxlength="5">
</div>
</form>
</div>

CSS

@import "headings.css";
@import "shadowbox.css";

* {
	margin: 0;
	padding: 0;
}

body {
	color: #3f3f3f;
	font-size: 13px;
	line-height: 16px;
	font-family: Tahoma, Verdana, Segoe, sans-serif;

	/*word-wrap: break-word; */
	/*	word-break: normal; */
	/*
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto; */

	/* 1858 */
	/* -442 + (1858 / 2) = 487, -1191 + (1858 / 2) = -262 */
	background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6+ TODO */
	background: -webkit-gradient(radial, 487px -262px, 0px, 487px -262px, 929px, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, rgba(0, 0, 0, 0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(487px -262px, 929px 929px, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%); /* Opera 12+ TODO */
	background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%); /* IE10+ TODO */
	background: radial-gradient(circle 929px at 487px -262px, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%); /* W3C */

	background-repeat: no-repeat;

	overflow-x: hidden;
}

ul {
	list-style: none;
}

input, textarea {
	border-radius: 5px;
	border-style: none;
	font-size: 14px;
	line-height: 18px;
	font-family: Tahoma, Verdana, Segoe, sans-serif;

	-webkit-user-modify: read-write-plaintext-only;
	-webkit-backface-visibility: hidden;
}

input:focus, textarea:focus {
	outline: none;
}

input[type="text"], input[type="email"], input[type="date"], input[type="tel"], input[type="search"], textarea {
	padding: 7px 0.5em 7px 0.5em;
	color: #3f3f3f;
	-webkit-box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
	box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
	border: 1px solid #DFDFDF;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="tel"]:focus,...

JavaScript

//nothing