Floating Label Input or Float Label Pattern Login & Register Form Styling

Please implement a floating label input field for the Login and Registration Widget. This is a modern UI/UX design pattern where the placeholder text inside an input field animates and transitions into a smaller label that floats above the field when the user starts typing. This design enhances usability by keeping the field label visible, ensuring clarity while maintaining a clean and minimalistic form appearance. Key Features: The label starts as a placeholder inside the input field. When the user focuses on the field or enters text, the placeholder animates and moves above the input line. It improves form accessibility and user experience by ensuring that users always see the field label. I really need this type of styling for my project. Thank you.

Attached images