Skip to content

Instantly share code, notes, and snippets.

@w3collective

w3collective/tailwind-login-form.html

Last active January 20, 2021 04:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save w3collective/7cbb2354574ab1340580a6a7a6393fe2 to your computer and use it in GitHub Desktop.
Save w3collective/7cbb2354574ab1340580a6a7a6393fe2 to your computer and use it in GitHub Desktop.
Download ZIP
Login form with Tailwind CSS
Raw
tailwind-login-form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tailwind CSS Login Form</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />
</head>
<body class="flex h-screen bg-indigo-700">
<div class="w-full max-w-xs m-auto bg-indigo-100 rounded p-5">
<header>
<img class="w-20 mx-auto mb-5" src="https://img.icons8.com/fluent/344/year-of-tiger.png" />
</header>
<form>
<div>
<label class="block mb-2 text-indigo-500" for="username">Username</label>
<input class="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300" type="text" name="username">
</div>
<div>
<label class="block mb-2 text-indigo-500" for="password">Password</label>
<input class="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300" type="password" name="password">
</div>
<div>
<input class="w-full bg-indigo-700 hover:bg-pink-700 text-white font-bold py-2 px-4 mb-6 rounded" type="submit">
</div>
</form>
<footer>
<a class="text-indigo-700 hover:text-pink-700 text-sm float-left" href="#">Forgot Password?</a>
<a class="text-indigo-700 hover:text-pink-700 text-sm float-right" href="#">Create Account</a>
</footer>
</div>
</body>
</html>
@w3collective
Copy link
Author

Source => https://w3collective.com/login-form-tailwind-css/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment