JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body{ background: black; }
::input-placeholder {
  opacity: 0;
}
::-webkit-input-placeholder {
  opacity: 0;
}
::-moz-placeholder{
    opacity: 0;
}
.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;
}
.placeholder_gavno > :not(:placeholder-shown) + label{
    display: none;
}
.phg_red > label > i{ color: red }