JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="///indorse.us15.list-manage.com/subscribe/post?u=93f666ec18288ad384d11f649&amp;id=7f298cf380" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">

<!-- Text Input Field -->
<div class="mc-field-group">

<input id="mce-EMAIL" class="required email" name="EMAIL" type="email" placeholder="Your Email" /> <input id="mc-embedded-subscribe" class="button" style="font-family: roboto;  " name="subscribe" type="submit" value="Subscribe" />

</div>
<!-- /Submit Button -->

</div>
</form></div>
<!--End mc_embed_signup-->

CSS

#mc_embed_signup { border: none; text-align: center; width: 100%; } /* Signup form container */

.mc-field-group { display: inline-block; } /* positions input field horizontally */

#mce-EMAIL { font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 1em; border: 2px solid #ABB0B2 ; color: #343434; background-color: #fff; padding: .7em 9em .7em 1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block; margin: 0; width: 400px} /* Input Styles */

.clear { display: inline-block; } /* positions button horizontally in line with input */

.button { font-family: 'Roboto', Helvetica,  Arial, sans-serif; font-size: 1em; letter-spacing: .03em; color: #fff; background-color: #2386C8 ; border: 10.5px solid #2386C8 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block; margin: 0; } /* Button Styles */

:-webkit-input-placeholder { color: #ABB0B2 ; } /* WebKit browsers */ 
:-moz-placeholder { color: #ABB0B2 ; } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #ABB0B2 ; } /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #ABB0B2 ; } /* Internet Explorer 10+ */

@media (max-width: 768px) { /* positions input field and button underneath each other with 100% width for tablet and mobile */
  
.mc-field-group { display: block; max-width: 100%; }
#mce-EMAIL { padding: .7em 0 .7em 1em; width: 96%; margin: 0; }
.clear { display: block; width: 100% }
.button { width: 40%; margin: .5em 0 0 0; }
  
}