JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="text" id="name" name="name" required="required" />
    <label for="name">Name</label>
    <br/>
    <input type="email" id="email" name="email" placeholder="Email" />
    <br/>
    <input type="submit" />
</form>

CSS

input {
    width: 160px;
}
input[type=submit] {
    width: auto;
}

input[required] + label {
    color: #999;
    font-family: Arial;
    font-size: .8em;
    position: relative;
    left: -166px; /* the negative of the input width */
}

input[required] + label:after {
    content:'*';
    color: red;
}

/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
    display: inline-block;
}

/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
    display: none;
}