Home
Tanvir Islam
Welcome Back

Welcome Back

This tailwind example is contributed by Tanvir Islam, on 29-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Tanvir Islam

565

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login with Fingerprint</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-lg w-96">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">Welcome Back</h1>
            <p class="text-gray-500">Sign in to continue</p>
        </div>

<form id="loginForm" class="space-y-6">
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                <input type="email" id="email" required
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
            </div>

<div>
                <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                <input type="password" id="password" required
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
            </div>

<div class="mt-8">
            <div class="relative">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-300"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-2 bg-white text-gray-500">Or continue with</span>
                </div>
            </div>

document.getElementById('fingerprintBtn').addEventListener('click', async function() {
            try {
                // Check if WebAuthn is supported
                if (!window.PublicKeyCredential) {
                    alert('Fingerprint authentication is not supported in this browser');
                    return;
                }

// Simulated fingerprint authentication
                // In real implementation, you would use the Web Authentication API
                // and communicate with your backend server
                const isAuthenticated = await simulateFingerprintAuth();
                
                if (isAuthenticated) {
                    alert('Fingerprint authentication successful!');
                    // Redirect or perform login action
                } else {
                    alert('Authentication failed. Please try again.');
                }
            } catch (error) {
                console.error('Authentication error:', error);
                alert('Error during authentication');
            }
        });

Related Examples

Login form with social login buttons

Author:
Task Master

2 years ago

17.9k
Sign in / Login Form

Author:
Bunny

2 years ago

12.3k
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

Author:
SHARIFUL ISLAM

1 month ago

262
Tailwind login page

Author:
Kofi Osei

2 years ago

10.5k
Login Form

Author:
Amit Pachange

2 years ago

11.6k
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Ari Mustofa

7 months ago

1.5k
Simple Login Form
Login Form Responsive Component

Author:
Ahita Bisma Adlula

2 months ago

505
Fullscreen login form with image backround

Author:
Rithik

1 year ago

1.5k
User registration form

Author:
Leon Bachmann

2 years ago

21.2k
Login
Login Creen office

Author:
Rushikesh Latpate

3 months ago

544
Registration Form

Author:
Maxim

3 weeks ago

101
Responsive login form
form with social login buttons

Author:
Aman kumar

1 year ago

4.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components