JSFiddle - React, Tailwind, and code Playground

HTML

<label for="nome" class="com-icone">Nome:</label>
                    <input type="text" id="nome" name="nome" placeholder="Seu nome aqui" pattern="[A-Za-z ']{4,}"  title="O nome precisa ter no mĂ­nimo 4 caracteres" autofocus required>
                    <label for="email" class="com-icone">Email:</label>
                    <input type="email" id="email" name="email" placeholder="seuemail@email.com" required>

CSS

*{margin:0; padding:0;}

input{
    font-family: inherit;
    font-size: 100%;
    padding: .25em .5em;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
.com-icone {
    position: relative;
}
.com-icone::after {
    content: ''; 
    width: 2em;
    height: 2em;
    background-color: #8C1D3D;
    background-size: 50% 50%; 
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 100%;
    left: 0;
}
.com-icone + input{
    position: relative;
    left: 2em;
    width: calc(100% - 2em);
    line-height: calc(1.25em + 1px); /*Linha adicionada*/
}
.com-icone[for="nome"]::after {
    background-image: url(../img/usuario.png);
}

.com-icone[for="email"]::after {
    background-image: url(../img/email.png);
}