JSFiddle - React, Tailwind, and code Playground

by Herman Nz

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div id="mywrapper">
    <form action="" method="">
        <input type="text" name="username" placeholder="Användarnamn" />
        <input type="password" name="password" placeholder="Lösenord" />
        <br/>
        <input type="submit" name="login" value="Logga in" /> 
        <br />
		<a href="#">Glömt lösenord?</a>
		<a href="#">Registrera</a>


    </form>
</div>

CSS

body {
    margin: 0 auto;
    padding: 0;
}
#mywrapper{
    margin:0 auto;
    width:50%;
}
form {
    margin-top: 200px;
    font-family: Helvetica, sans-serif;
    text-align: left;
}
/* 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"] {
    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;
}
/* 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;
}