Last active
July 6, 2023 18:30
-
-
Save bobbydank/495b1b7c5dee1bd3221bdf3428037cf6 to your computer and use it in GitHub Desktop.
tailwindcss-login.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"> | |
<div class="max-w-md w-full space-y-8"> | |
<div> | |
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900"> | |
Sign in to your account | |
</h2> | |
</div> | |
<form class="mt-8 space-y-6" action="" id="login-form" method="POST"> | |
<input type="hidden" name="remember" value="true"> | |
<div class="rounded-md shadow-sm -space-y-px"> | |
<div class="mb-5"> | |
<label for="email-address" class="sr-only">Email address</label> | |
<input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-4 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm text-md" placeholder="Email address"> | |
</div> | |
<div> | |
<label for="password" class="sr-only">Password</label> | |
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-4 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm text-md" placeholder="Password"> | |
</div> | |
</div> | |
<div> | |
<button id="login-button" type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-md font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
<span id="button-text">Sign in</span> | |
</button> | |
</div> | |
<div class="flex items-center justify-center gap-2"> | |
<div class="text-sm"> | |
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500"> | |
Register | |
</a> | |
</div> | |
<div class="text-sm"> | |
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500"> | |
Forgot your password? | |
</a> | |
</div> | |
</div> | |
</form> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment