JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<script src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
<link rel="stylesheet" href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css">
<div id="mc_embed_signup">
  <form action="//iliaberg.us14.list-manage.com/subscribe/post?u=64f4920ecc8ddde6d2041d41d&amp;id=97fa189caa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

      <div class="mc-field-group">
        <label for="mce-FNAME">Введите ваше имя </label>
        <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
      </div>
      <div class="mc-field-group">
        <label for="mce-EMAIL">Введите ваш e-mail </label>
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
      </div>
      <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
      </div>
      <!-- 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;" aria-hidden="true">
        <input type="text" name="b_64f4920ecc8ddde6d2041d41d_97fa189caa" tabindex="-1" value="">
      </div>
      <div class="clear">
        <input type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-image:url(http://iliaberg.ru/wp-content/uploads/2016/08/button_obuch3.png); width: 100px; height: 100px;">
      </div>
    </div>
  </form>
</div>

CSS

#mc_embed_signup .clear {
    clear: both;
    width: 100px;
    margin: 0 auto;
}
#mc_embed_signup .mc-field-group label{
  display:inline-block !important;
  width:150px;
}
#mc_embed_signup .mc-field-group input{
   display:inline-block !important;
   width:60%;
}

JavaScript

(function($) {
  window.fnames = new Array();
  window.ftypes = new Array();
  fnames[1] = 'FNAME';
  ftypes[1] = 'text';
  fnames[0] = 'EMAIL';
  ftypes[0] = 'email';
  /*
   * Translated default messages for the $ validation plugin.
   * Locale: RU
   */
  $.extend($.validator.messages, {
    required: "Это поле необходимо заполнить.",
    remote: "Пожалуйста, введите правильное значение.",
    email: "Пожалуйста, введите корректный адрес электронной почты.",
    url: "Пожалуйста, введите корректный URL.",
    date: "Пожалуйста, введите корректную дату.",
    dateISO: "Пожалуйста, введите корректную дату в формате ISO.",
    number: "Пожалуйста, введите число.",
    digits: "Пожалуйста, вводите только цифры.",
    creditcard: "Пожалуйста, введите правильный номер кредитной карты.",
    equalTo: "Пожалуйста, введите такое же значение ещё раз.",
    accept: "Пожалуйста, выберите файл с правильным расширением.",
    maxlength: $.validator.format("Пожалуйста, введите не больше {0} символов."),
    minlength: $.validator.format("Пожалуйста, введите не меньше {0} символов."),
    rangelength: $.validator.format("Пожалуйста, введите значение длиной от {0} до {1} символов."),
    range: $.validator.format("Пожалуйста, введите число от {0} до {1}."),
    max: $.validator.format("Пожалуйста, введите число, меньшее или равное*{0}."),
    min: $.validator.format("Пожалуйста, введите число, большее или равное {0}.")
  });
}(jQuery));
var $mcj = jQuery.noConflict(true);