Sleek and Dynamic Login Form Design Crafted with TailwindCSS

Sleek and Dynamic Login Form Design Crafted with 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 - Sleek and Dynamic Login Design Crafted with TailwindCSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
11        rel="stylesheet">
12</head>
13
14<body class="flex items-center justify-center min-h-screen font-['Rubik'] bg-[#e8e8e8]">
15
16    <div class="p-8 text-[#747474] bg-white shadow-md rounded-md w-[320px]">
17
18        <h2 class="text-black font-medium text-2xl text-center mb-4">Welcome back</h2>
19
20        <input
21            class="border px-4 outline-none text-xs w-full h-9 rounded-full mt-3 transition-all duration-300 focus:border-blue-300"
22            type="text" placeholder="Enter your email">
23        <input
24            class="border px-4 outline-none text-xs w-full h-9 rounded-full mt-3 transition-all duration-300 focus:border-blue-300"
25            type="password" placeholder="Enter your password">
26
27        <div class="text-right pt-1">
28            <a class="text-xs hover:text-blue-700 underline underline-offset-2" href="#">Forget password?</a>
29        </div>
30
31        <button
32            class="w-full shadow hover:bg-[#02786e] transition duration-300 text-sm bg-teal-600 text-white h-9 rounded-full mt-5">Login</button>
33
34        <div class="pt-3 text-center">
35            <p class="text-xs">Not have an account? <a href="#"
36                    class="text-blue-700 underline underline-offset-1">Signup</a></p>
37        </div>
38
39        <div class="flex hover:scale-105 transition duration-300 cursor-pointer gap-2 bg-black h-[34px] border-[1.5px] border-black rounded-full items-center w-full mt-6 justify-center">
40            <svg class="h-4" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
41                <path fill="url(#a)" d="M0 0h64v64H0z"/>
42                <defs>
43                    <pattern id="a" patternContentUnits="objectBoundingBox" width="1" height="1">
44                    <use xlink:href="#b" transform="scale(.01563)"/>
45                    </pattern>
46                    <image id="b" width="64" height="64" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABIpJREFUeJzdm1uIVVUYx3/fmJklXqKSsKKbdr9SQXSRHqxgIOhGFpFZ9CDUUy8VPSoU9dBDQS9RliIpFYIEE1JWEgOZhVGRYnkpFAZNLZ3UnF8Pe4ZGmX05++yz95x+j+esb83//5219qz9rbWCcY4awDygF7gNGIyIW5pVVQNqj/qk+oPHs6FpbR1HvVhd59h8UuXfOqnKzqpAvQd4Hzglpcn2GuXUi/qQeiTllx/hqaZ1dgT1WnUwx/yQOqtprZWjnqZuzjGv+lHTWjuC+kIB86o3Nq21ctRp6p4C5pc3rbUjqE8XML9Vnda01o6g9uWY369e37TOjqH+kWH+T/X/u+xVp2eY36ne1LTGjqKeN4bxQfV1dXodGppeCh8C1gJDwE6gH1gdEQN1CYiqOlJPBi4FLgemAn8D24ANEXGojX5nA1cAc4DThz8eADYDGyPi9zZkt4c6UX1QXa0eTpnLR9V+9Tn1ggJ99qhzh6fBrxnPiBF+VJeoF9bheURkqPPVLQUEjmZI/czkpWfSCX1epC5Wt7fY5wjH1HfVczttfqa6pqTI0RwwWQMsUzeYJKcK9qkPd8r8JeqOioR2kiH1+SKeCj8E1TnAF8DMsglsgEUR8WZWg0IJMFmH95M85buJw8B1EfFTWoOegh29QXeafxH4OatR7ghQ7wT6KhJVF3uB+yLi87yGmQkwqcl/B1xdkbA62AfMjYhNRRrnTYFeusv8MeDeouYhPwGL2tNTO69GxLpWAlKngDoD2A2c3KaoutgDnB8Rf7USlDUCeuke8wCvtWoeshNwcxtimmBlmaCsBHRTCfqXiNhcJjArAbmvruOI1JVeHmMmQJ3If8WHbmBb2cC0ETA947vxyJGygWkmKyuV1cSEsoHd9CtnMaNsYFoCDpbtsCFmlw3MWgnupY3M1swB4IyIONpqYNYU+K28ntqZCtxaJjArATvKaWmM+WWCshLwfUkhTbFAPbvVoKwEbGxDTBNMAl5qNSgrAd+U19IYj6n3txKQ9V8gSDYsu+1U1iFgXkR8VaRx6giICOm+YijAqUCfyYHLXPJWgh+3r6cRpgAfqi+raSdOgfyq8FRgF0lWu5UtJPsDq4ZH9XEU2Rd4D3i0A8LqZACYNdZKscjL0NLq9dTO8rRlcpER0ENScZlTtaoauSZtryB3BETEEPBK5ZLq49OsjZKiu8MTga1AZ09fdIZ5EbE27ctCBZHh+bOkMkn10Z9lHlo7IDEB+Ba4ql1VNSFwe0Ssz2pUuCQWEceAZ9tVVSMr8sxDieKn+jbweBlFNbIHuDIiduc1LJOAaSS1gvH8QHwkIlYUadhyVTgi9gMLSfbixyMri5pvC4tfc6mT+i5WmBxp/aBhw6M5qN5Qi/lRSZisftmwcU3uGvaW8dD2Fpg6BVgF3N1C2D/AeuBrktftQeBMklPhdwBntdjXwohY1kJMtZicGl9s+olxTQ4z96kL1NSdZ3WCepe61OS+UBZb1bl1es1EvUx9S901LHDA5DnxjHpOif4mqw+o76ib1N0mFyzXqE94wonzMvwLWZkUxAR9vlkAAAAASUVORK5CYII="/>
47                </defs>
48            </svg>
49            <p class="text-xs text-white pt-[2px]">Login with Apple</p>
50        </div>
51        <div class="flex hover:scale-105 transition duration-300 cursor-pointer gap-2 border-[1.5px] border-[#747474] h-[34px] rounded-full items-center w-full mt-3 justify-center">
52            <svg class="h-[14px]" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
53                <rect width="64" height="64" fill="url(#pattern0_112_54)"/>
54                <defs>
55                <pattern id="pattern0_112_54" patternContentUnits="objectBoundingBox" width="1" height="1">
56                <use xlink:href="#image0_112_54" transform="scale(0.015625)"/>
57                </pattern>
58                <image id="image0_112_54" width="64" height="64" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAB2AAAAdgB+lymcgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAivSURBVHic1Zt/cBTlGcc/z+5dciQhR/ghCkEroASigEYDmj/KABFBrFKN1YqiDuKvtlPoqCPjD2rrjJ1WxypUwVatVq3EEqgIeASNP8YaEYs/IAQFBx0VTYL5Rcjd7e7TP0hokEsuu3cb8DOTmdzu+zzv93127/bd531ewWf2l5YMi9vxEkHGK4wT0RFAPkIIJQ+wEFpQWoG9ILsF3QVsNpD/5Gyq/sZPfZJuh7oEo+X1s85RMS5BuAA4NUWXOxVWi2Osyn3tnXcFNB06O0lbAL6bMnGAaWYsUOF6lNHp8vs9akEetcV6amDllqZ0OEw5AFpWmNH0Xc414ujvEYakQ1QvaBVhmW3F7s+r2tqYiiPPAdAlGE1vTZqP6t0Cw1MRkQINKrI4XFn9uNevhqcAtE09Z7gl9tMKU73YpxuFN8SQ+eGN1Z+4tXUdgOapxXNUeBwY5NbWZ1pAFoQ3Vf/TjVGvA6AgzVOLH0BY6F5bn9GCIUVu7gSzN420rMxsOiFnhQg3e9fmO1+oGucP2FS9zY1R0jtAywozmhuyn0G4zLs233nTMAOX9o+8/a1bw0BPJxWkZV/2swiXetfmN7ost9FZKFvejXux7jEAzVOL74ZjdvAWwqJw5eZHUnHS7Vegefqki1R1FWCk0oFPNDhIWd6m6tdSdZQwAM3Tik9VeA/on2oHHSjwAcgbjjivBwzdKTGpz25xGhg50mlt/XSgtpsDHTHGizAZdArImd342upo4OK8V9/ekw5hCQPQNLW4EmFaGvw3gT4lyF9yN727041hy7RJ42x0nsCNQG6H2BfbzPZrjo98uD8N2ujweTiN087+mSCuJhMJsBF9xAoa9wxaX92ciqPmKUWD1TAXI9KYu6n6d76+DdaVlPQPhuI1qcztVflYDefqvMr3/pu6PP857Acu57Ka30jQyfPsTVgXjwbP/aEMHrrMBPUlsjjhwPNmYUPY+TwX3R905Ujhb+GBJ12ZvWFDe9pV+sihOyCeybXAICMcJfOq7QQK9rlwI+vDdtaNUl5up1+iv5gAqoh+xjN0vOGJqZhj9oEBzhe5PTpQ9KOYnXV+TlXVD+rKdyIAsQhnibA5UQN71wBia0ahsYTvTQ4iJeHK6nf8FOknBoAIF3XXwBzVSOiqGiQcTXT6oR/y4OH/vwHdBgBAhrQRmrcN88TDHuktVob81jdlfYShEYYBpydrKFkWmZfXEpz8deeRJ1Od5BwLGDZM7H1rJTjlCzKmff4NBkt91NVnBNRNADqNzt5b12/xXtcJyETMeaB9NsJL6fDlHr3XUGGCWzOBlF9DjwUURhui/MiDbVWatRwVBEYbCK7n/jak5fY/+shQAwi7NcsIUOeDmqOA5HgJgNKfBj/k9D3a38B9gkEpwvJDzlFADcDt6qpBhCw/1BwFmg3A9Tp7NEi+D2KOBi1e7gACFmN8ENPnKLrPUHCdXlaY7IegvkaUWkOEre4tKfVBT5+jYuwIAK4TmBZS9PTGE8deXbqnJlURYhhfKU55Sk6U44Afe7CrEa1kqKXs7a1NowZZaE+0ttp5j348O/Ir1536wE8fbH9E4RcuzTRgWcMEIL6Rj4DTkll8ojn8Mn4GX2o/gDZHYyftvLCq3r3k9PGTh1qHmk7gM6CfS9OPKhaFxh/MCAmrkrV+1T6OufFJnYMHyDIk43aXnaYdwwncivvBoxCBjpSYWt0HQIEn7JNZaE2gTY9IjC4as660xG3n6eKiB9rOFfi1F1tDjOegy9JYfCM7gVO6NjqAyV3x03jFGdqDK92eEZTiD2dE0rZg2RvKlmmOFY2+z/c095IdFYtCY6HLwojCw11b7NUQ18bOTjJ4ABkXi7O6cGVZhgchnliwXINWNPoPvA0eUZZ3/n8oAMF2noCDr7nvO3lcHpvMNu15UaQL0+2sphWsLOtV0VUqLFiuwbr90RdIksnuFuE7M5T5186PhwIgF9KGsvRfdj7z40U04PqCzivIalo7sWLKAE/CesHMhzW3bn+0HJjj1Yc6urT8Fmnt/HzY6vAfjYJl91pj6+Peq2LOjwYz3i58udR1ojUZFz8YK+5nRbfg9cof5NtoMPSnrgeOKJAoeLn0ClSeS6ETABv00VA8ftfWOVUpFTMXrJo2KNs+4+4RX951sziZPRZ1JUOFG1YvDK3oeixhiUzB2hkbQGek0lkHTcDTpmE+tm3W+u1uDAvXzRxnqTNPVG8C+ofaR5H/1WKClseCdOGtwPDMKeWXiX344QScunb6SAPjQyDbW28J+QB4Q9E3DaSGgDRkDa6v37J7pDM6p3WgOPHBAYwJip4FMh2OTNcHrDDDv76DrAPjXHUssN+xmLD6ttCuBOcSM/al0jkq8iLHWpmcmhxfN5+8xgt6bQHy84pFmQnrnrp9bNU/v3vHoCtHOXKMlMQfQpTW7C1YgX3ktJ2JJLk+Inp/xaLQn7s736N17azIfcCz3pT6S2P4Ffbk34kV6CmjpyvHN4Xu7MlPkvChZlv4OkFXehHpNwf6bWfPiFuJZiRMaq0Zkh2au2SJOD35SDpzqyvfbtdfXFQxOBg9HijyqNU3bLOVpnAVmbF8MmMjAFDRF6KB0JUv3CKxZPa93zGiSMG68+5DucO7XP8QhEH7rjgwpP7ypRULM29HpFfrHa63zBx8OhgrQAe7l+krLarcVHthxNVvlqdNU2PWlA6TgDyJcp4X+3Sj8KZtmNd+Omv9Ec/5ZHjfN6hIwcvnXQ/cAwzz7Cc1GhRuq70g8iTirYbY+yRH0B2zIyvMtvDJwA2Ar3t8v0eLon8IxWOja2dHnvA6eEjj1tnR62bmBh3nOkXn4tPTQqDGER6LZzh/311aeWxsnU3EKWunjzUx56J6CZLqMppuR+XfYjpramZWVqdytRPhSwC6MnbDjBOcuJaI6OmoFCLkAyM4mMkdANhAS8ff18BnonzqiG62gvLOrhkR1zvB3PA/U4zzsFGbkkcAAAAASUVORK5CYII="/>
59                </defs>
60            </svg>
61            <p class="text-xs">Login with Google</p>
62        </div>
63
64    </div>
65</body>
66
67</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.