JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder">
    <input type="text" />
    <label>Some text<span>*</span></label>
</div>

CSS

.holder {
    height: 26px;
    position: relative;
}
.holder input, .holder label {
    position: absolute;
    top: 0;
}
.holder input {
    background: rgba(0, 0, 0, 0);
    height: 20px;
    padding-left: 3px;
}
.holder input:focus {
    background: #ffffff;
}
.holder label {
    height: 26px;
    left: 5px;
    line-height: 26px;
    z-index: -1;
}
.holder label > span {
    color: #ff0000;
}