JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
            <div class="page">
            </div>
        </div>
    
    <!-- FOOTER -->
    <footer role="contentinfo">
        <div class="container" style="text-align: center;">
            
            <div class="footer-block">
                <div class="ft_title">Контакты</div>
                <ul>
                    <li>Тел: <i>6546546546</i></li>
                    <li>E-mail: <i>[email protected]</i></li>
                    <li>
                        <span class="pull_left">+</span>
                        <input type="checkbox" id="mail" style="display: none;"/><label  class="f_call_me" for="mail">Заказать обратный звонок</label>
                        
                    <div id="popup">
                        <form method="post" action="<?php echo bloginfo('template_url'); ?>/mail.php">
                            <label for="mail" title="Отменить">✕</label>
                            <div><input type='text' name='name' required /></div>
                            <div><input type="tel" name='tel' required maxlength="11" value='8'/></div>
                            <input type='submit' value='Заказать'/>
                        </form>
                    </div>
                    </li>
                </ul>
            </div>
                
           </div>
        </div>

    </footer>

CSS

html, body { 
    width: 100%; 
    min-height: 100%; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 400; 
    font-size: 14px; 
    background: #888; 
    line-height: 1.42em; 
    margin: 0;
}
a, visited { color: #006bd8; outline:0 none; }

.container { padding: 0 40px; }

.page { 
    min-height: 400px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.13); 
    top: -43px; 
    position: relative; 
    background: #fafaf1; 
    z-index: 1;
}

footer { 
    clear: both; 
    position: relative; 
    top: -83px; 
    background: #555; 
    padding-top: 60px; 
    min-height: 40px; 
    color: #888; 
    font-size: 0.9em; 
}

.footer-block { 
    min-width: 146px; 
    display: inline-block; 
    margin-right: 30px; 
    vertical-align: top; 
    margin-bottom: 20px; 
    overflow-x: hidden; 
}

.footer-block a { display: block; }
.footer-block a.top { font-weight: bold; margin-bottom: 10px; color: #aaa !important; }


.footer-block ul { margin: 0; padding: 0;}
.footer-block ul li { list-style-type: none; text-align: left; }
.footer-block ul i { font-style: normal; color: #ccc; }
.footer-block ul li a { font-weight: normal; }


/* POPUP CALL ME
-----------------------------*/
#mail {visibility: hidden;}
#mail:checked ~ #popup form {visibility: visible;}
#mail:checked + label {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 8;
  color: rgba(0,0,0,0);
  background: rgba(180,180,180,.9);
  cursor: pointer;
}
#popup {
  visibility: hidden;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 99999;
}

#popup form {
    position: absolute;
    z-index: 999999999;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 2% 4%;
    border: 10px solid rgb(255, 255, 255);
    border-radius: 8px;
    font-size: 140%;
    font-weight: 600;
    text-align: right;
    text-shadow: -1px -1px #666;
    color:...