Interactive Sign-In Form with Smooth Label Animation and TailwindCSS

Interactive Sign-In Form with Smooth Label Animation and TailwindCSS Project by SudhuCodes Made with TailwindCSS Language

Project Creator

@SudhuCodes — A project contributor on SudhuCodes platform.

Category

TailwindCSS — This project belongs to the tailwindcss category.

Upload Date

7/9/2025 — Uploaded to the SudhuCodes project library.

Project Description

Download free project assets built using tailwindcss. This open-source project is part of the SudhuCodes initiative to support developers and learners.

1<!DOCTYPE html>
2<!-- ------Code with SudhuCodes------ -->
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>SudhuCodes - Interactive Sign-In Form with Smooth Label Animation and TailwindCSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
11</head>
12
13<body class="h-screen flex items-center justify-center">
14
15
16    <div class="border w-[350px] text-center px-4 py-8 z-10 bg-white rounded-md shadow-[16px_16px_0_#15c5b1]">
17        <h2 class="text-3xl font-bold pt-4">Sign in</h2>
18        <p class="text-gray-500 pt-2 pb-8">Sign in to access your account</p>
19
20        <div class="flex flex-col w-full relative items-start justify-center">
21            <input class="w-full border h-11 rounded outline-none p-2 peer" type="email" id="email-input">
22            <label for="email-input"
23                class="absolute pl-2 ml-[1px] text-gray-500 peer-focus:-ml-1 peer-focus:px-2 bg-white peer-focus:scale-[0.83] peer-focus:-translate-y-6 pointer-events-none transition-all duration-300">Enter
24                your email</label>
25        </div>
26        <div class="flex flex-col w-full relative items-start justify-center mt-3">
27            <input class="w-full border h-11 rounded outline-none p-2 peer" type="password" id="password-input">
28            <label for="password-input"
29                class="absolute pl-2 ml-[1px] text-gray-500 peer-focus:-ml-1 peer-focus:px-2 bg-white peer-focus:scale-[0.83] peer-focus:-translate-y-6 pointer-events-none transition-all duration-300">Enter
30                your password</label>
31        </div>
32
33        <div class="text-right text-sm mt-2">
34            <a class="text-blue-600 underline" href="#">Forgot password?</a>
35        </div>
36
37        <button
38            class="w-full h-10 bg-[#15c5b1] hover:bg-[#32aa9c] transition-all duration-300 rounded mt-3 font-bold text-white">Login</button>
39
40        <p class="text-gray-500 mt-5">Don't have an account? <a class="font-semibold text-gray-600 underline"
41                href="#">Signup</a></p>
42    </div>
43
44
45    <script>
46        const inputs = document.querySelectorAll('input[type="email"], input[type="password"]');
47
48        inputs.forEach(input => {
49            const label = document.querySelector(`label[for="${input.id}"]`);
50
51            input.addEventListener('input', function () {
52                if (input.value.trim() !== '') {
53                    label.classList.add('scale-[0.83]', '-translate-y-6', 'px-2', '-ml-1');
54                } else {
55                    label.classList.remove('scale-[0.83]', '-translate-y-6', 'px-2', '-ml-1');
56                }
57            });
58        });
59    </script>
60</body>
61
62</html>

Live Preview

You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.

Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.

Have suggestions or improvements? Contact us or contribute on GitHub.