JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <nav>
    <p>
      Sample Text
    </p>
  </nav>
  <div class="header">
    <p>Lorem ipsum</p>
    <p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
    <input type="text" placeholder="Email">
    <button>Sign Up</button>
    <p>Aenean vulputate</p>
  </div>
</body>

CSS

body,
p {
  margin: 0px;
  font-family: Helvetica;
  color: white;
}

.header {
  background-color: #56BFB5;
  z-index: 2;
}

.header > p:first-of-type {
  font-family: inherit;
  text-align: center;
  font-size: 450%;
  padding: 80px 0 25px 0;
}

.header > p:nth-child(2) {
  text-align: center;
  font-size: 1.08em;
  padding-bottom: 10px;
  font-family: "Helvetica Neue";
}

.header > input {
  outline: none;
  border-radius: 5px;
  border-style: none;
  height: 45px;
  width: 218px;
  vertical-align: top;
  padding-left: 16px;
  padding-right: 16px;
  font-family: Helvetica Neue;
  font-size: 18px;
  background-color: rgb(250, 250, 250);
  display: block;
  margin: 0 auto;
}

.header > input ~ p {
  text-align: center;
  font-family: inherit;
  font-weight: bold;
  font-size: 20px;
  padding: 10px 0;
}

nav {
  height: 3.6em;
  background-color: #38817A;
  -webkit-box-shadow: 6px 39px 59px -38px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 6px 39px 59px -38px rgba(0, 0, 0, 0.7);
  box-shadow: 6px 39px 59px -38px rgba(0, 0, 0, 0.7);
  z-index: 3;
}

button {
  background-color: #48466D;
  color: inherit;
  font-family: "Helvetica Neue";
  padding: 15px 35px;
  font-size: 1.2em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;
  display: block;
  border-radius: 10px;
  border-style: none;
  outline: none;
}