Home
Freja Jensen
Simple login form

Simple login form

This tailwind example is contributed by Freja Jensen, on 20-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author Freja Jensen

9.6k

Fork Fullscreen

<div class="max-w-md mx-auto mt-24">
    <form class="p-4">
        <div class="mb-4">
            <label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
            <input type="email" id="email" name="email" class="w-full py-2 px-3 border border-gray-400 rounded-md shadow-sm focus:outline-none focus:border-blue-500" placeholder="Enter your email address">
        </div>
        <div class="mb-4">
            <label for="password" class="block text-gray-700 font-bold mb-2">Password</label>
            <input type="password" id="password" name="password" class="w-full py-2 px-3 border border-gray-400 rounded-md shadow-sm focus:outline-none focus:border-blue-500" placeholder="Enter your password">
        </div>
        <div class="flex items-center justify-between">
            <a href="#"
                class="text-gray-500 hover:text-blue-500 focus:outline-none focus:underline transition duration-150 ease-in-out">Forgot
                Password?</a>
            <button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue active:bg-blue-800 transition duration-150 ease-in-out">Submit</button>
        </div>
    </form>
</div>

Related Examples