JSFiddle - React, Tailwind, and code Playground

HTML

<body style="background-color:#f5f5f5;font-family:Tahoma;">

<div class="login_div">
	<div style="height:20px;width:240px;background-color:#00b300;"><span style="color:white;margin-left:10px">Secure Login</span></div>
	<form id="frm" action="check_login.php" method="post">
		<input class="in_box1" name="username" type="text" placeholder="Username/Email" title="Enter Username or Email" maxlength="20" required>
		<input class="in_box2" name="password" type="password" placeholder="Password" title="Enter Password" maxlength="10" required>
		<input style="margin-left:25px;font-size:15px;" type="checkbox" title="Enter Password">
		<span style="font-size:14px;">Remember Me</span><br>
		<input class="in_btn" type="submit" value="Login">
	</form>
</div>
</body>

CSS

div.login_div
{
    border-width:2px;  
    border-style:double;
	border-radius: 5px;
	height:200px;
	width:240px;
	float:left;
	margin-top:100px;
	margin-left:500px;
	background-color:white;
}
input.in_box1
{
	border-radius:10px;
	padding:10px;
	width:150px;
	height:5px;
	margin:20px 0px 5px 20px;
	background-image:url(un.png);
	background-repeat:no-repeat;
	background-size:25px 25px;
	background-position:left;
	padding-left:30px;
}
input.in_box2
{
	border-radius:10px;	
	padding:10px;
	width:150px;
	height:5px;
	margin:10px 0px 9px 20px;
	background-image:url(pass.png);
	background-repeat:no-repeat;
	background-size:25px 25px;
	background-position:left;
	padding-left:30px;
}
input.in_btn
{
	//padding:10px;
	width:60px;
	height:32px;
	font-size:16px;
	margin:10px 0px 10px 20px;
}
input::placeholder
{
	color:red;
	opacity:0.6;
}