JSFiddle - React, Tailwind, and code Playground

HTML

<div class="placeholder_gavno phg_red">
    <input type="text">
    <label>Name *</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 }

JavaScript

$('.placeholder_gavno').each( function(){
	var elem = $(this).children('label').html();
	var last = elem.toString().slice(-1);
    var other = elem.substring(0, elem.length - 1);
    $(this).children('label').html(other + '<i>' + last + '</li>');
})