JSFiddle - React, Tailwind, and code Playground

by AndyE

HTML

<span class="input-copy">dd/mm/yyyy</span>
<input type="text" />

CSS

.input-mask { position:relative; }
input, .mask-text { outline: none; border-radius: 4px; height:16px; border: 2px solid black; padding: 4px; font-weight:bold; line-height:16px; }
input:focus { border-color: red; }
.mask-text { pointer-events: none; position:absolute; border-color: transparent; background-color: transparent; left:1px;  }
.mask-input-remaining { color: lightgray; }

JavaScript

$(function () {
    var $m = $(".input-copy"), m = $m[0],
        $i = $m.next("input"), i = $i[0],
        cs = window.getComputedStyle(i, null);
    
    for (var k in cs)
        m.style[k] = cs[k];
    
    m.style.borderColor = 'transparent';
    m.style.backgroundColor = 'transparent';
    m.style.position = 'absolute'; 
    m.style.pointerEvents = 'none';
    m.style.color = 'lightgray';
    m.style["-webkit-text-fill-color"] = null;
    m.style.left = "1px";
    
    m.onfocusin = function () { i.focus(); }
})