JSFiddle - React, Tailwind, and code Playground

by Vasya88

HTML

<html>
<head>
<style>
	.boxForm {
		width: 220px;
		height: 110px;
		margin: 0 auto;
		background: #7b7b7b;
		border-radius: 10px;
		display: flex;
		/* flex-wrap: wrap; */
		justify-content: space-around;
		flex-direction: column;

	}
	[type='text'] {
		width: 200px;
		height: 30px;
		border: 2px solid grey;
		border-radius: 10px;
		margin-left: 10px;
		color: #7b7b7b;
	}
	[type='submit'] {
		width: 100px;
		height: 30px;
		border-radius: 10px;
		margin-left: 10px;
	}
</style>

<script>
	window.addEventListener('DOMContentLoaded', checkLogin);

	function checkLogin() {
		var login = document.getElementById('login'),
			password = document.getElementById('password'),
			myBtton = document.getElementById('myBut');

		myBut.addEventListener('click', function() {
			// alert(login.value)
			if (login.value.length == 0 || login.value == 'Login') {
				console.log(`Логин: ${login.value}, Длина строки: ${login.value.length}`);
				alert('Please, enter your login');
				login.style.borderColor = '#aa0e0e';
				login.style.background = '#444444';
				login.style.color = '#ffffff';
			} else {
				console.log(`Имя пользователя: ${login.value}`);
				login.style.background = '';
				login.style.color = '';
				login.style.borderColor = '';
				if (password.value.length == 0 || password.value == 'Password') {
					alert('Please, enter yourpassword');
					password.style.background = '#444444';
					password.style.borderColor = '#aa0e0e';
					password.style.color = '#ffffff';
				} else {
					password.style.background = '';
					password.style.borderColor = '';
					password.style.color = '';
					alert('Welcome!');
				}
			} // end if to 'login'

		})// end myBut

		login.addEventListener('click', function() {
			login.style.borderColor = '';
			login.style.background = '';
			login.style.color = '';
			login.value = '';
		}) // end login event
		password.addEventListener('click', function() {
			password.style.borderColor = '';
			password.style.background =...