Modern Login Form - Copy this Html, Tailwind Component to your project

Design a visually appealing and interactive Login and Registration UI for a webpage using HTML and Tailwind CSS. Focus on creating a sleek, user-centered design that includes engaging animations and micro-interactions to elevate the user experience. Key Visual and Interactive Details: Animations and Transitions: Add smooth hover effects and transitions for all interactive elements, such as buttons and text fields, to enhance responsiveness and interactivity. Real-Time Visual Feedback: Provide instant feedback when users fill out form fields (e.g., green for correct entries, red for incorrect ones) with subtle animations to guide the user. Error Messages: Display custom error messages below each field with a fade-in animation if the user inputs incorrect data. Icons and Illustrations: Use animated icons inside fields (e.g., email and password) and add a welcoming illustration on the login screen. Use a unique illustration that represents account creation on the registration screen. Dark Mode Toggle: Include a dark mode switch with smooth transition effects, allowing users to change the theme without page reload. Login with Social Media: Add visually distinctive, branded buttons for social logins (Google, Facebook, Twitter), each with appropriate icon animations. Interactive Checkbox for “Remember Me”: Design a custom checkbox with a subtle checkmark animation when selected, enhancing user engagement. Technical Specifications: Use Tailwind CSS utility classes for styling and maintaining a clean, modular code structure. Ensure all animations are subtle and do not interfere with usability or accessibility.