JSFiddle - React, Tailwind, and code Playground

HTML

<header>    
            <div class="panel"> 
                <a href="#join_form" id="join_pop">ХХХ</a> 
                 
            </div> 
     </header> 
        <a href="#x" class="overlay" id="join_form"></a> 
        <div class="popup"> 
            <form action="save_user.php" method="post"> 
            <p>Нужно о себе кое-что рассказать</p> 
            
           <div> 
               <label>Имя:<br></label> 
               <input name="name" type="text" size="15" maxlength="20"> 
              </div> 
 
           <div> 
               <label>Телефон:<br></label> 
               <input name="phone" type="text" size="15" maxlength="20"> 
            </div> 
           <div> 
               <label>E-mail адрес:<br></label> 
               <input name="email" type="text" size="15" maxlength="20"> 
              </div> 
            <input type="submit" name="submit" value="Сохранить" /> 
            <a class="close" href="#join_form"></a> 
             
        </div> 
        </form>

CSS

.main { 
    background: #aaa url(../images/bg.jpg) no-repeat; 
    width: 800px; 
    height: 600px; 
    margin: 50px auto; 
} 
.panel { 
    background-color: #FFFFFF; 
    height: 34px; 
    padding: 10px; 
} 
.panel a#login_pop, .panel a#join_pop { 
    border: 2px solid #3C13AF; 
    color: #3C13AF; 
    display: block; 
    float: right; 
    margin-right: 10px; 
    padding: 5px 10px; 
    text-decoration: none; 
    text-shadow: 1px 1px #fff; 
 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -ms-border-radius: 10px; 
    -o-border-radius: 10px; 
    border-radius: 10px; 
} 
a#login_pop:hover, a#join_pop:hover { 
    border-color: #eee; 
} 
.overlay { 
    background-color: rgba(0, 0, 0, 0.6); 
    bottom: 0; 
    cursor: default; 
    left: 0; 
    opacity: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    visibility: hidden; 

    z-index: 1; 
 
    -webkit-transition: opacity .5s; 
    -moz-transition: opacity .5s; 
    -ms-transition: opacity .5s; 
    -o-transition: opacity .5s; 
    transition: opacity .5s; 
} 
.overlay { 
    visibility: visible; 
    opacity: 1; 
} 
.overlay:target { 
    visibility: hidden; 
    opacity: 0; 
} 
.popup { 
    background-color: #fff; 
    border: 3px solid #fff; 
    display: inline-block; 
    left: 50%; 
    opacity: 0; 
    padding: 15px; 
    position: fixed; 
    text-align: justify; 
    top: 40%; 
    visibility: hidden; 
    z-index: 10; 
 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -ms-border-radius: 10px; 
    -o-border-radius: 10px; 
    border-radius: 10px; 
 
    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0,...