JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<form method="post" id="someform">
        <input type="text"  placeholder="Your name" autofocus required pattern="[a-z]{1,15}"/> 
        <input type="text" placeholder="Phone-number" required pattern="[0-9]{6,15}"/>
        <input type="email" placeholder="Email" required/> 
        <input class="button" type="submit"  rel="reg_form" value="request call"/>
      </form>
      <div class="popup reg_form">
          <span class="home"></span>
      <p class="popup_p">Request sent!</p>
      <p>We will call you as soon as we can.</p>
        <a class="close" href="#">Close</a>
        <button class="close">Close</button>
        </div>

CSS

#overlay
{
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background: #000;
  opacity: 0.8;
  z-index: 3;
}

.reg_form
{
  display:none;
  position: absolute;
  z-index: 5;
  color: #fff;
}

JavaScript

$(function () {
    $('#someform').submit(function (e) {;
        $('div.'+$(this).find('input[type="submit"]').attr("rel")).fadeIn(500);
        $("body").append("<div id='overlay'></div>");
        $('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
    		e.preventDefault()
    }); 
    $('a.close').click(function () {
        $(this).parent().fadeOut(100);
        $('#overlay').remove('#overlay');
        return false;
    });
    $('button.close').click(function () {
        $(this).parent().fadeOut(100);
        $('#overlay').remove('#overlay');
        return false;
    });
    });