JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Online-Tagebuch</title>
        <link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
    </style>
    </head>
    <body class="body">
        <div class = "header">
            <h1 class="title-animation">Tagebuch</h1>
            <p class="subtitle-animation">Das Online Tagebuch</p>
        </div>
        <div class ="wrapper">
            <div class="main">
                <h2>Neuer Tagebuch-Eintrag</h2>
                    <form method="post" action="<?= $_SERVER['PHP_SELF'] ?>">
                    Vorname<br />
                    <input type="text" name="vorname" value="" /><br /><br />
                    Name<br />
                    <input type="text" name="name" value="" /><br /><br />
                    Dein Eintrag<br />
                    <textarea rows="10" cols="60" name="eintrag"></textarea>
                    <br />
                    <input type="file" name="datei"><br>
                    <input type="submit" name="submit" />
                    </form>
                    <br />                         
                        <div>
                            <h3>Kommentare:</h3>
                            This<br>
                            This<br>
                            This<br>
                            This<br>This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                            This<br>
                     </div>
            </div>
        </div>
    </body>
</html>

CSS

.body{
    background-color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header {
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
    background: #04862b8c;
    color: white;
  }


  /*Animation Header*/

.header h1{
    font-size: 30px;
    animation-delay: .4s;
}  
.header p {
    font-size: 20px;
    animation-delay: .6s;
  }

  .title-animation {
    animation: pop-in 1s ease-out forwards;
    opacity: 0;
  }

  .subtitle-animation {
    animation: left-to-right 1s ease-out forwards;
    opacity: 0;
  }


  /*Formatierung div-element*/

    .wrapper {
    position: relative;
    clear: both;
    background-size: cover;
    background: url("https://images.pexels.com/photos/261579/pexels-photo-261579.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260") top center fixed;
    text-transform: uppercase;
  }
  

    /*Pseudoklasse für Anzeige des Hintergrundbildes*/
 
  .wrapper:after {
    padding-top: 75%;
    display: block;
    content: '';
    min-height:100%
  }


  .main {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    color: black;
    text-align: left;
    margin-top: 5%;
    padding-left: 15em;
  }

  /*Form-Formatierung*/

  textarea {
    caret-color: rgb(25, 0, 255);  
    width: 60em;
    height: 15em;
    border: 1px solid #cccccc;
    padding: 0.5em;
    font-family: Tahoma, sans-serif;
    resize: none;
  }

form {
	caret-color: rgb(25, 0, 255);  
	padding: 0.5em;
	font-family: Tahoma, sans-serif;
}

  /*Keyframes*/

  @keyframes pop-in {
    0% {
      opacity: 0;
      transform: translateY(-4rem) scale(.8);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes left-to-right {
    0% {
      opacity: 0;
      transform: translateY(-4rem) scale(.8);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }