JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div class="content">
            <h2>Login</h2>
            <span>
                <div class="nameField">
                Username: 
                </div>
                <div class="inputField">
                    <input type="text" name="username" size="30" maxlength="2048"/>
                </div>
            </span>
            <span><div class="nameField">
                Password: 
                </div>
                <div class="inputField"><input type="password" name="password" size="30" maxlength="2048"/>
                    </div>
            </span>
        </div>

CSS

body {
        background-image: url(image/bg.jpg); background-size: 100%;
    }

    .content{
        border: 1px solid gray;

        background-color: #464749;
        width:333px;
        height: 352px;
        padding: 58px 76px 0 76px;
        color: #ebebeb;
        font: 12px Arial, Helvetica, sans-serif;
    }
    span{
        display:block;  
        margin-left: 30px;
    }
    input{
        width: 205px;
        padding: 10px 4px 6px 3px;
        border: 1px solid #0d2c52;
        background-color:#1e4f8a;
        font-size: 16px;
    }
    .nameField{

        display:inline-block;
        width:80px;
        text-align: right;
        padding: 14px 10px 0 0;
        margin:0 0 7px 0;
    }
    .inputField{
        display:inline-block;
        width:130px;
        margin:0;
        margin:0 0 7px 0;
    }