JSFiddle - React, Tailwind, and code Playground

by AntonTrollback

HTML

<div>
    <form>
        <label for=name>Name:</label>
        <input id=name type=text placeholder="Carl Sagan">
        <label for=city>City:</label>
        <input id=city type=text placeholder="Stockholm">
        <label for=email>Email:</label>
        <input id=email type=text [email protected]>
        <label for=username>Username:</label>
        <input id=username type=text placeholder=Saaagan92>
        <label for=pw>Password:</label>
        <input id=pw type=password placeholder=••••••••>
        
        <button type=submit>Agree &amp; Submit</button>
        <a href=#>Terms</a>
    </form>
</div>

CSS

div {
    width: 250px;
    margin: 50px auto;
    padding-left: 100px;
    position: relative;
    font: 14px/22px sans-serif;
}
form {
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
}
label {
    position: absolute;
    right: 260px;
    padding: 6px;
    cursor: pointer;
}
input {
    width: 235px;
    display: block;
    padding: 6px 7px;
    border: 0; outline: 0;
    font: 14px/22px sans-serif;
    border-bottom: 1px dotted #dadada;
}
a {
    float: right;
    margin: 15px 0;
    text-decoration: none;
}
button {
    margin: 15px;
    float: right;
}

JavaScript

/*
Press enter to change input focus. 
Not everyone seem to know about the tab key but sure knows how to line break.
Might need some work to make it feel more natural to press enter. 

Also, would be cool to support cmd+a
*/

$('input').bind("keydown", function(e){
    if (e.keyCode == 13) {
        $(this).next().focus();
        return false;
    }
});