JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="">
    <p>
        <input type="text" name="username" placeholder="Användarnamn">
        <input type="password" name="password" placeholder="Lösenord">
    </p>
    <p>
        <input type="submit" name="login" value="Logga in">
        <span>
            <a href="#">Glömt lösenord?</a>
            <a href="#">Registrera</a>
        </span>
    </p>
</form>

CSS

body {
	margin: 0;
	padding: 0;
}

form {
	/* margin-top: 200px; */
	font-family: Helvetica, sans-serif;
	/* text-align: center; */
}

form p {
    margin: 10px;
}

form p span {
    padding-left: 130px;
}

/* Input text actions */

input[type="text"] {
	width: 150px;
	padding: 10px;
  	border: solid 1px #dcdcdc;
  	transition: box-shadow 0.3s, border 0.3s;
}

input[type="text"]:hover {
  	border: solid 1px #707070;
  	box-shadow: 0 0 5px 1px #969696;
}

input[type="text"]:focus {
  	border: solid 1px #707070;
  	box-shadow: 0 0 5px 1px #969696;
}

/* Input password actions */

input[type="password"] {
	width: 150px;
	padding: 10px;
  	border: solid 1px #dcdcdc;
  	transition: box-shadow 0.3s, border 0.3s;
}

input[type="password"]:hover {
  	border: solid 1px #707070;
  	box-shadow: 0 0 5px 1px #969696;
}

input[type="password"]:focus {
  	border: solid 1px #707070;
  	box-shadow: 0 0 5px 1px #969696;
}

/* Input submit-button actions */

input[type="submit"] {
	margin-top: 5px;
	/* margin-left: -112px; */
	color: #FFFFFF;
	background-color: #16a085;
	padding: 10px;
  	border: solid 1px #FFFFFF;
  	transition: box-shadow 0.3s, border 0.3s;
}

input[type="submit"]:hover {
  	border: solid 1px #707070;
  	box-shadow: 0 0 5px 1px #969696;
}

input[type="submit"]:focus {
    outline: 0;
}

/* Link actions */

a {
	font-size: 12px;
	transition: color 0.5s;
	font-family: Helvetica, sans-serif;
	text-decoration: none;
	list-style: none;
	color: #3498db;
}

a:hover {
  	color: #2980b9;
}