Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Login form with Tailwind CSS
<!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

This comment has been minimized.

Copy link
Owner Author

@w3collective w3collective commented Dec 30, 2020

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