JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="popup-onleave-wrap">
  <div class="popup-onleave">
    <div class="popup-inner">
      <div class="popup-close"></div>
      <h3 class="popup-title">
        Возникли сложности при заказе? Мы можем позвонить Вам в течении <nobr>1-2 минут</nobr> абсолютно бесплатно! 
        <span>Мы свяжемся с Вами и ответим на любые возникшие вопросы!</span>
      </h3>
      <form action="/">
        <label>
          <span>Ваш телефон</span>
          <input type="text" placeholder="+7(___) ___-__-__">
        </label>
        <label>
          <input type="submit" value="Позвонить мне →">
        </label>
      </form>
    </div>
  </div>
</div>

CSS

.popup-onleave-wrap {
    background: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: table;
    font-family: 'Helvetica', 'Arial', sans-serif;
    line-height: 1.1;
    color: #333;
    z-index: 9999;
}
.popup-onleave-wrap .popup-onleave {
    display: table-cell;
    padding-left: 30px;
    padding-right: 50px;
    vertical-align: middle;
}
.popup-onleave-wrap .popup-onleave .popup-inner {
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 13px 101px rgba(0,0,0,0.7);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 22px 30px 20px;
    position: relative;
}
.popup-onleave-wrap .popup-close {
    position: absolute;
    right: -22px;
    top: -23px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 1;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    cursor: pointer;
}
.popup-onleave-wrap .popup-close:hover {
  opacity: .8;
}
.popup-onleave-wrap .popup-close:active {
    opacity: .9;
}
.popup-onleave-wrap .popup-close:before,
.popup-onleave-wrap .popup-close:after {
    position: absolute;
    left: 9px;
    content: ' ';
    height: 21px;
    width: 3px;
    border-radius: 3px;
    background-color: #fff;
}
.popup-onleave-wrap .popup-close:before {
    transform: rotate(45deg);
}
.popup-onleave-wrap .popup-close:after {
    transform: rotate(-45deg);
}
.popup-onleave-wrap .popup-title {
    font-weight: normal;
    margin: 0 0 30px;
    font-size: 21px;
    font-family: 'proxima_nova_bold', sans-serif;
}
.popup-onleave-wrap .popup-title span {
    font-size: 14px;
    display: block;
    margin-top: 5px;
    font-family: "PT Sans", sans-serif;
    font-style: italic;
}
.popup-onleave-wrap form {
    font-size: 12px;
    font-size:...

JavaScript

/*
    jQuery Masked Input Plugin
    Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com)
    Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
    Version: 1.4.1
*/
!function(factory) {
    "function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory("object" == typeof exports ? require("jquery") : jQuery);
}(function($) {
    var caretTimeoutId, ua = navigator.userAgent, iPhone = /iphone/i.test(ua), chrome = /chrome/i.test(ua), android = /android/i.test(ua);
    $.mask = {
        definitions: {
            "9": "[0-9]",
            a: "[A-Za-z]",
            "*": "[A-Za-z0-9]"
        },
        autoclear: !0,
        dataName: "rawMaskFn",
        placeholder: "_"
    }, $.fn.extend({
        caret: function(begin, end) {
            var range;
            if (0 !== this.length && !this.is(":hidden")) return "number" == typeof begin ? (end = "number" == typeof end ? end : begin, 
            this.each(function() {
                this.setSelectionRange ? this.setSelectionRange(begin, end) : this.createTextRange && (range = this.createTextRange(), 
                range.collapse(!0), range.moveEnd("character", end), range.moveStart("character", begin), 
                range.select());
            })) : (this[0].setSelectionRange ? (begin = this[0].selectionStart, end = this[0].selectionEnd) : document.selection && document.selection.createRange && (range = document.selection.createRange(), 
            begin = 0 - range.duplicate().moveStart("character", -1e5), end = begin + range.text.length), 
            {
                begin: begin,
                end: end
            });
        },
        unmask: function() {
            return this.trigger("unmask");
        },
        mask: function(mask, settings) {
            var input, defs, tests, partialPosition, firstNonMaskPos, lastRequiredNonMaskPos, len, oldVal;
            if (!mask && this.length > 0) {
                input =...