JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<div class="blackout">
    <div class="input-cover"></div>
    <div class="input-wrap"><input type="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit"></div>
</div>
<div class="blackout">
    <div class="input-cover"></div>
    <div class="input-wrap"><input type="text" value="Lorem ipsum"></div>
</div>

CSS

* {padding:0;margin:0;}
input {border:none;}

.blackout {
    position:relative;
    width:150px;
    line-height:2em;
    margin-top:1em;
    border: 1px solid #ddd;
}
.input-wrap,
.input-cover {
    height:2em;
}
.input-cover {
    width:30%;
    background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
    position:absolute;
    right:0;
}
.input-wrap,
.input-wrap input {
    width:100%;
}