JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://diarypeople.fr/AlphaPrime/img/submitLog.png"></script>
<header>
	<div id="login">
    	<form action="" method="post">
            <input type="email" name="email" id="email" class="inputLog" placeholder="Email" required="required" />
            <input type="password" name="pass" id="pass" class="inputLog" placeholder="Mot de passe" required="required" />
            <input type="submit" value=" " class="submitLog" />
         </form>
    </div>
	<div id="logo"></div>
</header>

CSS

@charset "utf-8";
html, body{
	background-color:#4eb0e8;
	margin:0
}
input, textarea{
	border:none;
	outline:none;
	padding:3px
}
header{
	background-color:#292929;
	height:140px;
	margin:0;
	text-align:center;
	padding:10px 0;
	position:fixed;
    left:0;
    right:0;
}
#login{
	width:570px;
	display:inline-block;
	height:140px;
	text-align:left;
    vertical-align:middle;
}
#logo{
	background:url(../img/logo.png);
	width:230px;
	height:119px;
	display:inline-block;
}

/* espace login */

.inputLog{
	background:#FFF;
	border-radius:3px;
	height:27px;
	width:150px;
	border:#4eb0e8 solid 1px;
	font-weight:bold
}
.submitLog{
	background:url('http://www.weblobsdesigner.fr/submitLog.png');
	width:32px;
	height:32px;
	width:32px;
	display:inline-block;
	border:0;
}
.submitLog:hover{
	background-position:-32px;
}