JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <h1 id="title">Survey Form for Tech</h1>
  <p id="description">Help us improve your experience!</p>

  <!-- Background Image -->
  <div class="background-image">

  </div>

  <!-- Survey Form -->
  <form id="survey-form">
      <div class="form-flow">
          <label for="name" id="name-label">Name</label>
          <input id="name" type="text" required="" placeholder="Enter your name">
      </div>
  </form>
</body>

CSS

* { margin: 0; padding: 0; }

body
{
    text-align: center;
}

/* Title Size and Font */
#title
{
    font-size: 40px;
    font-family: Mv Boli, sans-serif, arial;
}

/* Description Size and Font */
#description
{
    font-size: 20px;
    font-family: Mv Boli, sans-serif, arial;
}

/* Background Image */
/*background-image:after 
  {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(Tech.jpg);
    opacity: 0.25;
  }*/

.background-image
{
    position: fixed;
    top: 0;
    bottom: 0;   
    width: 100%;
    height: 100%; 
    opacity: 0.25;
    z-index: -5000;
    background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
    background-repeat: no-repeat;
     background-size: cover;
}

/* Survey Form Styling */
#survey-form
{
    background: hsl(204, 94%, 65%);
    max-width: 500px;
    margin: 50px auto;
    padding: 25px;      
}