JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div id="mc_embed_signup">
    <form id="mc-embedded-subscribe-form" class="validate" action="https://correctiv.us12.list-manage.com/subscribe/post?u=74b23e1b0af8c36eb217e01c1&amp;id=11db73eab8" method="post" name="mc-embedded-subscribe-form" novalidate target="_blank">

        <div id="mc_embed_signup_scroll">
            <div class="mc-field-group">
                <label for="mce-EMAIL">E-Mail-Adresse </label>
                <input id="mce-EMAIL" class="required email" name="EMAIL" type="email" placeholder="z.B. [email protected]"/></div>
            <div class="mc-field-group">
                <label for="mce-LNAME">Name </label>
                <input placeholder="z.B. Marie Müller" id="mce-LNAME" class="" name="LNAME" type="text" /></div>

            <div class="clear"><input id="mc-embedded-subscribe" type="submit" value="Abonnieren" name="subscribe" class="button" /></div>
        </div>
    </form>
</div>

CSS

form#mc-embedded-subscribe-form { 
display: flex;
justify-content: center;
margin: 20px auto 50px auto;
}

.mc-field-group {
  margin: 20px auto;
}

  
.mc-field-group label {
  display: inline-block;
width: 150px;
font-family: inherit;
font-size: inherit;
}

.mc-field-group input {
-webkit-box-ordinal-group: 2;
  background: #fff;
  border: 0 solid transparent;
  border-radius: 50px;
  box-shadow: rgba(0,0,0,.1) 0 0 10px 0 inset;
  box-sizing: border-box;
  display: inline-block;
  font-family: inherit,sans-serif;
  font-size: 80%;
  height: 30px;
  line-height: 1.15;
  margin: 0 0 10px;
  order: 1;
  outline: none;
  overflow: visible;
  padding: 10px 30px 10px 40px;
  transition: all .3s;
}


input#mc-embedded-subscribe {
    -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  color: white;
  display: block;
  font-size: inherit;
  line-height: 1;
padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  transition-delay: 0s;
  transition-duration: .5s;
  transition-property: all;
  transition-timing-function: ease;
  width: auto;
  outline: 0;
  cursor: pointer;
  background-color: #ff5064;
  border-radius: 30px;
  border: solid 0px transparent;
}