JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <form>
        <label for="name" class="cool-label">Full Name
            <input id="name" type="text" placeholder="John Doe" />
        </label>
        <br class="clr" />
        <label for="email" class="cool-label">Email
            <input id="email" type="text" placeholder="[email protected]" />
        </label>
        <br class="clr" />
    </form>
</body>

CSS

body {
    background: #eee;
}
form {
    width: 300px;
    margin-top: 20px;
}
.cool-label {
    border: 1px solid rgba(0, 0, 0, .2);
    background: #fff;
    margin-bottom: 10px;
    width: 100%;
}
label.cool-label {
    margin: 5px;
    float: left;
    text-align: right;
}
.cool-label input {
    border: none;
    background: transparent;
    width: 175px;
    padding: 5px;
    padding-left: 120px;
    margin-left: -100px;
}
.cool-label input:focus {
    background: rgba(0, 130, 255, .1);
    outline: none;
}
.clr {
    clear:both;
}