Tailwind CSS can not configure correctly placeholder

I'm replacing all the CSS to use just tailwind CSS. I was looking on his page that they have an inputs with a transition but I need to add an icon on the inner left side. I was changing the colors and the position of the placeholder because otherwise the icon and the text were colliding. But if I change the position of the placeholder when it is focused the top line goes too much at the right side. I was looking every before/after of the code but I didn't get the expected results.

<div class="relative mb-6 flex items-center">
    <input class="peer h-full px-3 py-2 pl-8 rounded-[7px] border border-blue-gray-200
        border-t-transparent bg-transparent text-sm font-normal
        text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border
        placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200
        focus:border-2 focus:border-blue-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
           placeholder=" " />
    <label class="before:content[''] after:content[' '] pointer-events-none absolute
        left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight
        text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px]
        before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md
        before:border-t before:border-l before:border-blue-gray-200 before:transition-all
        after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block
        after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r
        after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm
        peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500
        eer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent
        peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-blue-500 peer-focus:before:border-t-2
        peer-focus:before:border-l-2 peer-focus:before:border-blue-500 peer-focus:after:border-t-2
        peer-focus:after:border-r-2 peer-focus:after:border-blue-500 peer-disabled:text-transparent
        peer-disabled:before:border-transparent peer-disabled:after:border-transparent
        peer-disabled:peer-placeholder-shown:text-blue-gray-500">
        Input With Icon
    </label>
    <i class="fas fa-heart absolute left-4 mb-0 mt-auto"></i>
</div>

Correctly focus expected.

Correctly expected placeholder.

So I need to know which part of the code I need to configure to just move the placeholder but the focus I wanted to be the same as the original.

Actual placeholder.

Tailwind Input