JSFiddle - React, Tailwind, and code Playground

HTML

<div class="email">
    <h2>Design tips, tricks and freebies. Delivered weekly.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing.</p>
    <div class="subscriber">
        <form action="" method="post">
          <div class="wrapper">
            <input type="email" name="email" placeholder="Email Adress">
            <input type="submit" value="SUBSCRIBE">
            </div>
        </form>
    </div>            
</div>

CSS

.email {
    background-color: #F5F0DD;
    position: absolute;
   
    text-align: center; 
    width: 100%;
    padding-bottom: 220px;
}
.email h2 {
    font-family : 'Ubuntu', sans-serif;
    font-size : 1.5em;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
 
.email p {
    font-family : 'Ubuntu', sans-serif;
    font-size : 0.7em;
    color: #fff;
    margin-bottom: 25px;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.subscriber input[type="email"] {
    border : 0;
    border-radius : 5px;
    width : 240px;
    font-family : 'Open Sans', sans-serif;
    font-size : 1.0em;
    color : #000;
    padding : 10px 10px 10px 10px;
    position: relative;
}
 
.subscriber input[type="submit"] {
    background : #ff2d2d;
    font-size : 0.7em;
    color : #fff;
    font-family : 'Ubuntu', sans-serif;
    border : 0;
    border-radius : 5px;
    padding : 12px 35px 12px 35px;
    cursor : pointer;
    position: relative;
}
@media only screen and (max-width: 720px) {
  .wrapper {
     flex-direction: column;
     align-items: center;
  }
}