JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
    <head>
        <meta charset="urf-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <title>Sign in form</title>
        
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Raleway:700,400' rel='stylesheet' type='text/css'>
        
    </head>
    
    <body>
        
        <div id="form-wrapper">
            <div id="header">
                <h1>Create an account <i class="ion-locked"></i></h1>
            </div>
            <div id="content">
                <form>
                    <h2>Email Address:</h2><br>
                    <input type="text" name="username" placeholder="">
                    <br>
                    <h2>Password:</h2><br>
                    <input type="text" name="password" placeholder="">
                    <br><br>
                    <input type="submit" value="Create Account">
                    <input type="submit" value="Cancel">
                </form>
            </div>
        </div>
        
        
        
        
        
    </body>
</html>

CSS

/* CSS Reset
*************************/

* {
    margin: 0;
    padding: 0;
}

body { background-color: #f9f9f9; }

p { font-family: 'Raleway', sans-serif; }

h1, h2, h3 { font-family: 'Bitter', serif; }

ol, li { list-style: none; }

/* Page Structure
*************************/

#form-wrapper {
    border-radius: 5px 5px 0 0;
    margin: 100px auto;
    width: 40%;
    min-width: 450px;
}
    
    #header {
        background-color: firebrick;
        box-shadow: 0 0 10px  #444;
        border-radius: 5px 5px 0 0;
        color: #fff;
        padding: 2.5% 4%;
        text-shadow: 1px 2px 5px #333;
    }
    
    #content {
        background-color: #fff;
        box-shadow: 0 0 10px  #444;
        border-radius: 0 0 5px 5px;
        color: #444;
        padding: 2.5% 4%;
    }

/* Header
*************************/

#header .ion-locked {
    float: right;
    position: relative; right: 8px;
}

/* Content
*************************/

input[type="text"] {
    height: 50px;
    font-family: 'Raleway', sans-serif;
    font-size: 1.25em;
    margin-bottom: 2.5%;
    padding: 0 2.5%;
    width: 95%;
}

.input:focus {
    box-shadow: inset 0 0 5px firebrick;
}

input[type="submit"] {
    background-color: firebrick;
    border-color: #7C1818;
    border-style: solid;
    border-width: 1px;
    color: #fff;
    display: inline-block;
    
    font-family: 'Raleway', sans-serif;
    font-size: 1.25em;
    padding: 10px 15px;
}

@media screen and (max-width: 920px) {
    
    #form-wrapper {
        width: 80%;
    }
    
}

@media screen and (max-width:445px) {
    
    #form-wrapper {
        padding: 0 5%;
        width: 90%;
    }
    
}