JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

<div class="labels">
    <label for="fname">First Name</label>
    <label for="lname">Last Name</label>
    <label for="bcity">Birth Place</label>
</div>
<div class="inputs">
    <input placeholder="What do your friends call you?" id="fname" />
    <input placeholder="And what is your last name?" id="lname" />
    <input placeholder="Where abouts were you born?" id="bcity" />
</div>

CSS

body {
    width: 30em;
    margin: 2em auto;
    font-family: "Segoe UI";
}

label, label::after {
    color: #CCC;
    margin-left: 1em;
    transition: color 1s;
}

label::after {
    content: "|";
}

label:hover {
    color: #000;
}

input {
    width: 100%;
    display: block;
    opacity: .5;
    padding: .5em 1em;
    margin-top: 1em;
    transition: opacity .5s;
}

input:hover {
    opacity: 1;
}