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>

SCSS

/* test styles ---- ignore! */
/**/  body {
/**/    background: url(http://image.prntscr.com/image/b117091c9b4d477e9f64561ec7c0c038.png) top center;
/**/    background-size: cover;
/**/  }
/* // test styles ---- ignore! */


.popup-onleave-wrap {
  background: rgba(255,255,255,.9);
  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 {
    display: table-cell;
    padding-left: 30px;
    padding-right: 50px;
    vertical-align: middle;
    .popup-inner {
      max-width: 1000px;
      margin: 0 auto;
      background: #fff;
      box-shadow: 2px 1px 30px 0 rgba(0,0,0,.2);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 22px 30px 20px;
      position: relative;
    }
  }
  .popup-close {
    position: absolute;
    right: -22px;
    top: -23px;
    width: 20px;
    height: 20px;
    background: #1189d7;
    border: 6px solid #1189d7;
    border-radius: 50%;
    opacity: 1;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -ms-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    cursor: pointer;
    box-shadow: 2px 1px 30px 0 rgba(0,0,0,.2), 0 0 3px 1px rgba(0,0,0,.1);
    &:hover {
      opacity: .8;
    }
    &:active {
      opacity: 1;
    }
    &:before, &:after {
      position: absolute;
      left: 9px;
      content: ' ';
      height: 21px;
      width: 3px;
      border-radius:3px;
      background-color: #fff;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
  .popup-title {
    font-weight: normal;
    margin: 0 0 30px;
    font-size: 21px;
    span {
      font-size: 14px;
      display: block;
      margin-top: 5px;
    }
  }
  form {
    font-size: 12px;
    font-size: 0;
 ...

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 =...