JSFiddle - React, Tailwind, and code Playground

HTML

<div class="placeholder_gavno phg_red">
    <input type="text">
    <label>Name <i>*</i></label>
</div>

CSS

body{ background: black; }
.placeholder_gavno{
    display: flex;
    flex-direction: column;
    position: relative;
    background: white;
}
.placeholder_gavno > label{
    position: absolute;
    top: 3px;
    left: 7px;
    z-index: 1;
    color: gray;
}
.placeholder_gavno > input{
    background: transparent;
    z-index: 2;
}
.placeholder_gavno > input:focus + label{
    display: none;
}
.phg_red > label > i{ color: red }