JSFiddle - React, Tailwind, and code Playground

HTML

<!-- code for input -->
<div class="form-group complete">
    <label>label for text input</label>
    <input type="text" required></input> 
    <span class='error-message'></span>

</div>
<!-- code for dropdown -->
<div class="form-group complete">
    <label>label for select input</label>
    <div class="custom-selectbox custom-selectbox-form">
        <select name="sth" required>
            <option>a</option>
            <option>b</option>
            <option>c</option>
            <option>d</option>
        </select> <span class="selectedValue">&nbsp;</span>
 <span class="is-visually-hidden">select to open the list</span>

    </div> <span class="error-message">This is an error message</span>

</div>

CSS

.complete input[type="text"]:invalid + .error-message:before {
    content:'OK';
    font-size: 1em;
    border: red solid;
}
.complete input[type="text"] {
    color: red;
    display: inline-block;
}