JSFiddle - React, Tailwind, and code Playground

by Sergei

HTML

<form class="form--newsletter" method="post" id="send-newsletter" data-subdomain="apakadeemia">

        <input id="newsletter-name" type="text" class="input" placeholder="Nimi" name="newsletter-name" required>
          <div id="newsletter-error" class="error"></div>

          <hr class="modal-window-hr">

          <input type="hidden" value="" name="secretkey">
          <input id="newsletter-email" type="email" class="input" placeholder="E-post" name="newsletter-email" required>
          
        <hr class="modal-window-hr">
          
     <input class="button button--sm" type="submit" value="LIITU UUDISKIRJAGA" name="Submit">
        </form>

CSS

.form--newsletter {
   max-width: 420px;
   margin: 0 auto;
 }
 .form--newsletter .input {
    text-align: center;
    display: block;
    width: 100%;
    max-width: 100%;
    /*border: 1px solid #e7e6e2;*/
    border: 0;
    padding: 30px 0 0 0;
    font-size: 18px;
    margin-bottom: 10px;
    outline: none;
    font-family: Roboto;
    font-weight: 500;
    font-style: bold;
  }
  #send-newsletter:valid .button {
    background : #57897c;
    color:#ffffff;
  }

  ::-webkit-input-placeholder {color:#424242;
  font-style: italic;}
  ::-moz-placeholder          {color:#424242;}/* Firefox 19+ */
  :-moz-placeholder           {color:#424242;}/* Firefox 18- */
  :-ms-input-placeholder      {color:#424242;}

  .input{
   color:#424242 ;

  }
 .form--newsletter .newsletter-hr {
   margin-top: 5px;
   margin-bottom: 5px;
   height: 0px;
   box-shadow: 0 0 4px 1px rgba(233, 233, 233, 0.5);
   border: solid 1px #e9e9e9;
 }
 .form--newsletter .button {
   display: inline-block;
   padding: 7px 50px;
   margin: 30px 0 0 0;
   font-size: 18px;
   font-weight: 500;
   color: #8a8a8a;
   border-radius: 1px;
   box-shadow: 0 0 4px 0 #9f9a97;
   background-color: #fdfdfd;
   border: solid 2px #ffffff;
 }
 .form--newsletter .button:hover{
  background-color: #57897c;
  color:#ffffff;
 }
 .button:hover {
   background: #de162d;
 }
 .button--unsub {
   margin-top: 9px;
 }
 .newsletter-heading {
   text-align: center;
   margin-top: 40px;
 }
 .newsletter-block {
   position: relative;
   margin-top: 40px;
 }
 .newsletter-text {
   font-size: 22px;
 }
 .newsletter-email,
 .newsletter-email:hover {
   color: #f00;
 }
 .newsletter-email:hover {
   border-bottom: 1px dotted #f00;
 }
 .newsletter-form {
   margin-top: 30px;
   text-align: center;
 }
 .error {
   margin-bottom: 10px;
   text-align: center;
   color: red;
 }
 a:active,
 a:focus,
 a {
   color: #ed1b2f;
 }
 a:hover {
   color: #af1f24;
 }
 #newsletter-response,
 .newsletter-page-hide,
 .modal_thanks {
   display: none;
...