JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="i i1"><input type="text" placeholder="Щелкни сюда"></div>
    <div class="i i2"><input type="text" placeholder="Щелкни сюда"></div>
    <div class="i i3"><input type="text" placeholder="Щелкни сюда"></div>
    <div class="i i4"><input type="text" placeholder="Щелкни сюда"></div>

CSS

.i{
        margin: 50px;
    }

    input{
        width: 99%;
    }

input::-webkit-input-placeholder {color: #000;}
input:-moz-placeholder {color: #000;}

.i1 input:focus::-webkit-input-placeholder {color: transparent;}
.i1 input:focus:-moz-placeholder {color: transparent;}

.i2 input:focus::-webkit-input-placeholder {color: #fff;}
.i2 input:focus:-moz-placeholder {color: #fff;}

.i3 input:focus::-webkit-input-placeholder {font-size: 0;}
.i3 input:focus:-moz-placeholder:{font-size: 0;}


.i4 input:focus::-webkit-input-placeholder {text-indent: -9999px;}
.i4 input:focus:-moz-placeholder {text-indent: -9999px;}