JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ilyas.host-yes.ru/bitrix/fancybox2/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://ilyas.host-yes.ru/bitrix/fancybox2/jquery.fancybox.css">
<a class="auth-pop" href="#auth-to">Войти</a>


<form id="auth-to" action="/auth/?login=yes" target="_top" method="post" name="system_auth_form73544" style="height:345px;width:420px;display: none;">


	<span style="color: rgb(2, 2, 2); display: block; font-size: 25px; padding-left: 30px; padding-top: 21px;">Авторизация</span>
		<span style="color: rgb(114, 112, 105); font-size: 13px; display: block; padding: 15px 0px 5px 30px;">Логин</span>
		<p>
			<input id="dd"  style="height:42px;width:358px;display:block;padding:0;margin:0 auto;border:1px solid #f3f4f4;border-radius:3px;" type="text" size="17" value="" maxlength="50" name="USER_LOGIN" class="bx-auth-input auth-1">
		</p>
		
		<span style="color: rgb(114, 112, 105); font-size: 13px; display: block; padding: 20px 0px 5px 30px;">Пароль:</span>
		<p><input style="height:42px;width:358px;display:block;padding:0;margin:0 auto;border:1px solid #f3f4f4;border-radius:3px;" type="password" size="17" maxlength="50" name="USER_PASSWORD" class="bx-auth-input auth-2"></p>
		<p style="line-height: 49px;">
			<input type="checkbox" value="Y" style="margin: 10px 0px 0px 30px;" name="USER_REMEMBER" id="USER_REMEMBER_frm">
			<label title="Запомнить меня на этом компьютере" for="USER_REMEMBER_frm" style="color:#727069;font-size:13px;">Запомнить меня</label>
			<a rel="nofollow" href="/auth/?forgot_password=yes&amp;backurl=%2Fauth%2F" style="float: right; color: rgb(0, 128, 0); font-size: 13px; margin-right: 21px; text-decoration: none; line-height: 12px; border-bottom: 1px dashed rgb(0, 128, 0); margin-top: 18px;">Забыли пароль?</a>
		</p>
		
		<p style="">
			<input class="auth-sub" style="
			" type="submit" value="Войти" name="Login">
		</p>

</form>

JavaScript

$(document).ready(function(){
    
    $('.auth-pop').fancybox({
		maxWidth	: 420,
		maxHeight	: 345,
		padding     : 0,
		openEffect	: 'none',
		/*openSpeed   : 250,*/
		closeEffect	: 'none',
		helpers : {
			overlay : {
				locked : false,
				/*speedOut   : 0,*/
				/*showEarly  : true*/
			}
		}
	});
    
    })