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

710

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

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:
AyDin VM

1 year ago

3.9k
login
Dark mode login

Author:
Hacker Development

1 month ago

261
Login form
responsive login page design

Author:
Aman kumar

1 year ago

3.9k
Sign in form
includes Google login button

Author:
Paul Intay

1 year ago

2.3k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

2 years ago

22k
Fullscreen login form with image backround

Author:
Rithik

1 year ago

1.7k
cards
html , css ,

Author:
Hacker Development

1 month ago

218
Login Card

Author:
Anonymous

1 year ago

2.7k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

4 months ago

1.5k
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

1 year ago

1.3k
Login Form
Bigger input field Login form. like bootstrap input-lg

Author:
muhittin budak

2 months ago

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

Author:
Anja Müller

1 year ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components