JSFiddle - React, Tailwind, and code Playground

by Alex Str

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <header>
        <p>HEADER</p>
    </header>

    <div class="login-container">
        <form>
            <div class="login-form">
                <input type="text" placeholder="Enter Name" />
                <input type="password" placeholder="Enter Password..." />
                <input type="email" placeholder="Enter@Email" />
            </div>
            
            <div class="agree-box">
                <input type="checkbox" name="box" class="checkbox">
                <a href="#agree">I Agree this</a>
            </div>
            
            <button class="button">SUBMIT</button>
        </form>
    </div>

    <footer>
        <p>2018</p>
    </footer>
</body>

</html>

CSS

body {
    font-family: "Times New Roman", Times, serif;
    background-color: lightgreen;
}

header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
}

.login-container {
    display: inline-block;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

form {
    display: inline-block;
    padding: 15px;
}

.login-form input {
    padding: 8px;
    display: block;
    text-align: center;
    margin-bottom: 10%;
}

.button {
    float: right;
}