Home
Tanvir Hasan Bappy (Tanvir)
login from with fingerprint

login from with fingerprint

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), 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 Hasan Bappy (Tanvir)

697

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

Author:
Amine Ghanim

2 months ago

312
Login with google provider
Login with google provider

Author:
Aman kumar

1 month ago

263
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

6 days ago

37
Sample login form

Author:
Orestis Tsakiridis

7 months ago

790
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

1 year ago

7.4k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
Anonymous

2 months ago

68
Tailwind login form with image
basic form design useful for rapid prototyping.

Author:
Abigail

2 years ago

12.1k
Login page
Login and register page, you can reuse both

Author:
Abhiraj

4 months ago

1.1k
Login form

Author:
Rajesh Maheshwari

3 months ago

702
Login form
responsive login page design

Author:
Aman kumar

1 year ago

3.8k
Responsive login form with image

Author:
Anonymous

8 months ago

1k
Animated Sign in background
Sign-in page with floating blobs as background.

Author:
Nii Anyetei

9 months ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components