JSFiddle - React, Tailwind, and code Playground
HTML
<div id="mc_embed_signup">
<form action="http://stshop.us3.list-manage1.com/subscribe/post?u=f58ef1ab99f33128522ff1c20&id=85c500fcd2" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_f58ef1ab99f33128522ff1c20_85c500fcd2" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<!--End mc_embed_signup-->
CSS
#mc_embed_signup form {
background-color:#ffffff; /*this is the Aqua color background. Enter another hexidecimal code for the color of you choosing */
display:block;
position:relative;
text-align:left;
padding:10px 0 0px ;
width:960px; /*this is the width of the background bar, you may adjust */
height:45px; /*this is the height of the background bar, you may adjust */
}
#mc_embed_signup h2 {
font-weight:bold;
padding:0;
margin:15px 0;
font-size:1.4em;
}
#mc_embed_signup input {
-webkit-appearance:none;
}
#mc_embed_signup input[type=checkbox]{
-webkit-appearance:checkbox;
}
#mc_embed_signup input[type=radio]{
-webkit-appearance:radio;
}
#mc_embed_signup label {
font: 20px sans-serif !important;
font-weight: bold;
float:left;
}
#mc_embed_signup input.name{
padding:5px 5px 5px;
font: 18px sans-serif !important;
margin:10px 15px 0 0;
height:16px;
}
#mc_embed_signup input:focus {
border-color:#333;
}
#mc_embed_signup .button {
display: inline block !important;
margin:-35px 0px 0px 630px;
padding:5px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: 80px;
}
#mc_embed_signup .button:hover {
}
#mc_embed_signup .small-meta {
font-size: 11px;
}
#mc_embed_signup .nowrap {
white-space:nowrap;
}
#mc_embed_signup .clear {
clear:none;
display:inline;
}
#mc_embed_signup label {
position: relative;
font-size:14px;
left:100px;
color:#ffffff;
padding-top: -70px;
overflow:hidden;
}
#mc_embed_signup input.email {
position: relative;
display: inline block !important;
font: 14px sans-serif !important;
float:left;
padding:5px 10px;
text-indent:8px;
width:15%;
min-width:200px;
max-width: 360px;
padding-top: 5px;
padding-right: 13px;
padding-bottom: 5px;
margin:-22px 0px 0px 390px;
height:16px;
}
#mc_embed_signup input.button {
width:10%;
min-width:80px;
}
#mc_embed_signup div#mce-responses {
float:left;...