JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text-wrapper">
    <input class="text-input" type="text" id="text"></input>
    <label class="text-input-label" for="text">Click me</label>
</div>

CSS

.text-wrapper {
        position: relative;
    }
    .text-input-label {
        position: absolute;
        /* left and right properties are based on margin, border, outline and padding of the input text field */
        left: 5px;
        top: 3px;
        color: #D1D1D1;
    }
    #text:focus + label {
        display: none;
    }