JSFiddle - React, Tailwind, and code Playground

by Станислав Некрасов

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Statistics.Online</title>
	<link rel="stylesheet" href="/static/main/css/base.css">
	<link rel="stylesheet" href="
/static/lk/css/log.css
">
	<link rel="icon" href="/static/main/site-icon/favicon-32x32.png" type="image/png" sizes="32x32">
	
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="/static/jquery.countdown/jquery.countdown.js"></script>
</head>
<body>

    <header>
		<a href="/" id="logo">
			<span>Statistics.Online</span>
		</a>
		<div id = "about">
            
			<a href="/" title = "На главную">На главную</a>
            
		</div>
	</header>
    </div>
    
	
	<div class="alert">
  		<span class="closebtn">×</span>
  		<strong>Ошибка!</strong> Произошла ошибка при регистрации! Вернитесь в форму регистрации и проверте корректность данных!
	</div>
	
	
	<main>
    <!--Форма регистрации--->
    <div class="container" id="container">
	<div class="form-container sign-up-container">
		<form
            action="/register" method="post">
			<h1>Регистрация</h1>
			<span>Введите все нужные данные!</span>
			<input id="csrf_token" name="csrf_token" type="hidden" value="Ijg3ZDMxMzg1MjZjNmUyOGNiNzhjY2YxMGVmOWJjZWE5ODI3NDg5MGMi.YiTMCw.DkerqHkjDKFtGjLxxsCqctRt7IY">
            
                    <input id="name" maxlength="100" minlength="3" name="name" placeholder="Имя" required type="text" value="swpUser">
                
            
                    <input id="surname" maxlength="100" minlength="3" name="surname" placeholder="Фамилия" required type="text" value="swpUser">
                
            
                    <input id="email" name="email" placeholder="Email" type="text" value="[email protected]">
                
            
                   ...

JavaScript

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Statistics.Online</title>
	<link rel="stylesheet" href="/static/main/css/base.css">
	<link rel="stylesheet" href="
/static/lk/css/log.css
">
	<link rel="icon" href="/static/main/site-icon/favicon-32x32.png" type="image/png" sizes="32x32">
	
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="/static/jquery.countdown/jquery.countdown.js"></script>
</head>
<body>

    <header>
		<a href="/" id="logo">
			<span>Statistics.Online</span>
		</a>
		<div id = "about">
            
			<a href="/" title = "На главную">На главную</a>
            
		</div>
	</header>
    </div>
    
	
	<div class="alert">
  		<span class="closebtn">×</span>
  		<strong>Ошибка!</strong> Произошла ошибка при регистрации! Вернитесь в форму регистрации и проверте корректность данных!
	</div>
	
	
	<main>
    <!--Форма регистрации--->
    <div class="container" id="container">
	<div class="form-container sign-up-container">
		<form
            action="/register" method="post">
			<h1>Регистрация</h1>
			<span>Введите все нужные данные!</span>
			<input id="csrf_token" name="csrf_token" type="hidden" value="Ijg3ZDMxMzg1MjZjNmUyOGNiNzhjY2YxMGVmOWJjZWE5ODI3NDg5MGMi.YiTMCw.DkerqHkjDKFtGjLxxsCqctRt7IY">
            
                    <input id="name" maxlength="100" minlength="3" name="name" placeholder="Имя" required type="text" value="swpUser">
                
            
                    <input id="surname" maxlength="100" minlength="3" name="surname" placeholder="Фамилия" required type="text" value="swpUser">
                
            
                    <input id="email" name="email" placeholder="Email" type="text" value="[email protected]">
                
            
                   ...