Feat: Re-create Login Screen Using Tailwind CSS

nelsonic commented 1 year ago

With Tailwind CSS now being available by default in Phoenix 1.7 we might as well adopt it in Auth ... 💭

This is what auth v1 looks like at the time of writing: https://auth.dwyl.com

We 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 (or CSS) expert. ⏳

nelsonic commented 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. ❤️

nelsonic commented 1 year ago

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>

dwyl / auth

Feat: Re-create Login Screen Using Tailwind CSS #286