JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div class="form-group">
        <label>Why does this not work</label>
        <input name="name" type="text" class="form-control" required>
    </div>
    <div class="form-group">
        <input name="name" type="text" class="form-control" required>
        <label>Why does this work</label>
    </div>
</form>

CSS

form input:focus + label {
    background: rgba(0, 0, 0, 0.5);
    color: red;
    z-index: 2;
    text-transform: uppercase;
}