JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="wrapper">
		<h1>Введите e-mail</h1>
		
			<fieldset>
				<input type="text" placeholder="E-mail" id="milko">
				<button id="go">ОК</button>
			</fieldset>
		
	</div>
	<div class="alert-zero" id="alert-zero">
		<p>Введите e-mail!</p>
		<button id="close-zero">OK</button>
	</div>
	<div class="hide-layout" id="hide-layout"></div>





</body>
</html>

CSS

*{
			margin:0;
			padding:0;
		}
		html{
			width:100%;
			height:100%;
		}
		body{
			width:100%;
			height:100%;
			position:relative;
		}
		.wrapper{
			padding:30px;
			border:2px solid #777;
			border-radius:5px;
			width:240px;
			margin:auto;
			text-align:center;
			font-family:Arial;
			background:#eee;
		}
		h1{
			font:24px/38px Arial;
			color:#666;
		}
		fieldset{
			display:inline-block;
			border:1px solid #777;
			border-radius:3px;
			background:#fff;
			height:22px;
		}
		input{
			border:none;
			font-size:14px;
			line-height:16px;
			color:#666;
		}
		input[type="text"]{
			padding:2px 2px 2px 5px;
			font-size:14px;
			line-height:16px;
			height:18px;
		}
		form button{
			border:none;
			background:transparent;
			height:22px;
		}
		form button:hover{
			cursor:pointer;
			background:#eee;
		}
		.alert-zero{
			padding:30px;
			border:2px solid #f00;
			border-radius:5px;
			width:240px;
			height:60px;
			text-align:center;
			font-family:Arial;
			background:#eee;
			font-family:Arial;
			display:none;
			position:absolute;
			top:50%;
			left:50%;
			margin-top:-62px;
			margin-left:-152px;
			z-index:999;
		}
		.alert-zero p{
			color:#f23;
			font-size:16px;
			line-height:26px;
		}
		.alert-zero button{
			font-size:14px;
			font-weight:bold;
			line-height:18px;
			padding:3px;
		}
		.hide-layout{
			width:100%;
			height:100%;
			background:#bbb;
			opacity:.5;
			position:fixed;
			top:0;
			bottom:0;
			z-index:998;
			display:none;
		}

JavaScript

$(document).ready( function () {
   
		$(function(){
			$("#go").click(function(){
				$("#alert-zero").show();
				$("#hide-layout").show();
			});
			$("#close-zero").click(function(){
				$("#alert-zero").fadeOut(300);
				$("#hide-layout").fadeOut(300);
			});
		});
	
});