Open nelsonic opened 1 year ago
Progress so far:
Confident I can get this working with another T25m
of focus time. 🧑💻
But sadly, my time has run out for today ⏳
and I gotta go be a full-time-dad. ❤️
Currently just working in an index.html
file to get the layout I want:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tailwind Login</title>
<meta name="description" content="Login">
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.2.7/tailwind.min.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
.body-bg {
background-color: #3baa93;
background-image: linear-gradient(315deg, #3baa93 0%, #1a7566 74%);
}
</style>
</head>
<body class="body-bg min-h-screen pt-12 md:pt-20 pb-6 px-2 md:px-0" style="font-family:'Lato',sans-serif;">
<header class="max-w-lg mx-auto">
<a href="#">
<h1 class="text-4xl font-bold text-white text-center">Auth</h1>
</a>
</header>
<main class="bg-white max-w-lg mx-auto p-8 md:p-12 my-10 shadow-2xl">
<section>
<h3 class="font-bold text-4xl">Welcome!</h3>
<p class="text-gray-600 pt-2">Please sign in:</p>
</section>
<section class="mt-10">
<form class="flex flex-col" method="POST" action="#">
<label class="block text-gray-700 text-sm font-bold mb-2 ml-3" for="email">Email</label>
<div class="mb-6 pt-3 bg-gray-200">
<input type="text" id="email" class="bg-gray-200 w-full text-gray-700 focus:outline-none border-b-4 border-gray-300 focus:border-teal-600 px-3 pb-3">
</div>
<label class="block text-gray-700 text-sm font-bold mb-2 ml-3" for="password">Password</label>
<div class="mb-6 pt-3 bg-gray-200">
<input type="password" id="password" class="bg-gray-200 w-full text-gray-700 focus:outline-none border-b-4 border-gray-300 focus:border-teal-600 px-3 pb-3">
</div>
<div class="flex justify-end">
<a href="#" class="text-sm text-teal-600 hover:text-teal-700 hover:underline mb-6">Forgot your password?</a>
</div>
<button class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 rounded shadow-lg hover:shadow-xl transition duration-200" type="submit">Sign In</button>
</form>
</section>
</main>
<footer class="max-w-lg mx-auto flex justify-center text-white">
<a href="#" class="hover:underline">Contact</a>
<span class="mx-3">•</span>
<a href="#" class="hover:underline">Privacy</a>
</footer>
</body>
</html>
With
Tailwind CSS
now being available bydefault
inPhoenix 1.7
we might as well adopt it inAuth
... 💭This is what
auth v1
looks like at the time of writing: https://auth.dwyl.comWe can definitely tidy up this copy for consistency. Just using this as a guide for layout.
Drawing inspiration from:
https://github.com/davidgrzyb/tailwind-login-template
https://tailwind-elements.com/docs/standard/forms/login-form/
https://flowbite.com/blocks/marketing/login
I expect this to take me a few hours cause I'm no
Tailwind
(orCSS
) expert. ⏳