Last active
March 29, 2020 07:03
-
-
Save OssiPesonen/62b847f00c329e3963f86b5d3c4d14d9 to your computer and use it in GitHub Desktop.
Tailwind login component
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
<template> | |
<div class="relative font-medium md:h-screen flex items-center content-center"> | |
<div class="mr-auto ml-auto w-full"> | |
<div class="w-full max-w-md mr-auto ml-auto mt-4 mb-1 text-center"> | |
<h1 class="text-gray-800 block text-3xl font-extrabold font-title">Sign in to your account</h1> | |
</div> | |
<div class="w-full max-w-md mr-auto ml-auto mt-43 mb-6 text-center font-medium text-sm"> | |
Or | |
<a href="#" | |
class="text-indigo-600 hover:text-indigo-800 duration-200 transition-all">start your 14-day free trial</a> | |
</div> | |
<div class="w-full max-w-md mr-auto ml-auto mt-4"> | |
<div class="bg-white shadow rounded-md px-8 py-8 mb-4 ml-auto mr-auto"> | |
<div class="mb-4"> | |
<label class="block text-gray-700 text-sm font-medium mb-2" for="username"> Email | |
address </label> | |
<input class="shadow-sm appearance-none border border-gray-400 rounded w-full py-2 px-3 text-gray-700 text-sm leading-tight focus:outline-none focus:border-indigo-300" | |
id="username" type="text" placeholder="user@example.com"> | |
</div> | |
<div class="mb-6"> | |
<label class="block text-gray-700 text-sm font-medium mb-2" for="username"> Password </label> | |
<input class="shadow-sm appearance-none border border-gray-400 rounded w-full py-2 px-3 text-gray-600 text-sm leading-tight focus:outline-none focus:border-indigo-300" | |
id="password" type="password" placeholder="***************"> | |
</div> | |
<div class="mb-6"> | |
<div class="grid sm:grid-cols-2 gap-4"> | |
<div class="text-center sm:text-left"> | |
<label> | |
<input type="checkbox" class="mr-2"> | |
<span class="text-sm font-medium text-gray-700 ">Remember me</span> | |
</label> | |
</div> | |
<div class="text-center sm:text-right"> | |
<a href="#" | |
class="text-indigo-600 font-medium text-sm duration-200 transition-colors hover:text-indigo-800">Forgot | |
your password?</a> | |
</div> | |
</div> | |
</div> | |
<div class="mb-6"> | |
<button type="button" | |
class="bg-indigo-600 hover:bg-indigo-400 shadow-sm text-white font-semibold text-sm py-3 px-0 rounded text-center w-full hover:bg-tertiary duration-200 transition-all"> | |
Sign in | |
</button> | |
</div> | |
<div class="grid sm:grid-cols-3 gap-0 mb-6"> | |
<hr class="mt-3 hidden sm:block border-gray-400"> | |
<span class="text-center bg-white text-sm text-gray-700 font-normal">Or continue with</span> | |
<hr class="mt-3 hidden sm:block border-gray-400"> | |
</div> | |
<div class="grid grid-cols-3 gap-2"> | |
<button type="button" class="relative border-solid border shadow-sm border-gray-400 | |
font-semibold text-gray-600 text-sm py-1 text-center rounded text-center w-full | |
focus:outline-none hover:border-indigo-600 transition-all duration-200"> | |
<i class="fab fa-google text-lg" style="line-height: 28px;"></i> | |
</button> | |
<button type="button" class="relative border-solid border shadow-sm border-gray-400 | |
font-semibold text-gray-600 text-sm py-1 px-0 rounded text-center w-full | |
focus:outline-none hover:border-indigo-600 transition-all duration-200"> | |
<i class="fab fa-twitter text-lg" style="line-height: 28px;"></i> | |
</button> | |
<button type="button" class="relative border-solid border shadow-sm border-gray-400 | |
font-semibold text-gray-600 text-sm py-1 px-0 rounded text-center w-full | |
focus:outline-none hover:border-indigo-600 transition-all duration-200"> | |
<i class="fab fa-linkedin text-lg" style="line-height: 28px;"></i> | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: 'HelloWorld', | |
props: { | |
msg: String | |
} | |
} | |
</script> | |
<style> | |
body { | |
background: #f7fafc; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment