JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background">
<br>
<br>
<br>
<br>
<br>
<br>
Das ist mein Fake-Video um die Welt zu irritieren
</div>
<form>
<p>
Hier ist Ihr Eingabeformular. Wir wünschen viel Vergnügen bei der Benutzung unseres technisch hochwertigen HALLO(tm) Eingabefeldes.
</p>
<label for="hallo">Hallo</label>
<input type="text" name="hallo" value="Dumdidum">
</form>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

body {
  position:relative;
}

div.background {
  width:50%;
  height:100%;
  background-color: #ccc;
  position: absolute;
  top: 0; left: 0;
  z-index:-10;
}
form {
  margin:  10px auto;
  border: 1px solid green;
  padding: 50px 20px;
  width: 500px;
  height: calc(100% - 20px);
  box-sizing: border-box;
  background-color: rgba(180,180,180,0.5)
}
label {
  display:inline-block;
  width:30%;
}
input {
  width:69%;
  box-sizing:border-box;
}