JSFiddle - React, Tailwind, and code Playground

by Debloper

HTML

<section>
    <header>
        <aside>
            Registered User? Come on, in...
            <form name="login">
                <input type="text" placeholder="User ID" />
                <input type="password" placeholder="Password" />
                <input type="submit" value="Log In" />
            </form>
            <br />
            New here? Then join us...
            <form name="login">
                <input type="email" placeholder="Email ID" />
                <input type="submit" value="Sign Up" />
            </form>
        </aside>
        <div id="title">CoinCod</div>
        <div id="punchline">
            The Awesome Punchline goes here...
        </div>
    </header>
</section>

CSS

header {
    padding: 96px 32px;
    background-color: #9c3;
}
aside {
    float: right;
    width: 280px;
    top: -32px;
    position: relative;
    color: #360;
    font-family: Sans-serif;
}
#title {
    color: #fff;
    font-size: 80px;
    font-weight: bold;
    text-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}
#punchline {
    color: #fff;
    font-size: 20px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

input {
    padding: 4px;
    font-size: 120%;
}
input[type="text"] { width: 264px; }
input[type="password"] { width: 180px; }
input[type="email"] { width: 180px; }
input[type="submit"] { width: 80px; margin: 0; }