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

1.3k

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

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

Author:
Ahita Bisma Adlula

1 year ago

3k
Login form
Component was one shot generated using https://inspi.me

Author:
yogourt

1 month ago

96
Contact us Form with Responsive

Author:
KULDEEP

7 months ago

635
chating
chating all social media

Author:
Nirere Esther

9 months ago

433
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

9 months ago

1.1k
Simple login form

Author:
Freja Jensen

3 years ago

11k
login
login by : html , css

Author:
Hacker Development

9 months ago

1.5k
Simple generated login form
Login

Author:
Jerome Soriano

2 weeks ago

46
Login Form
Login Form With google icon

Author:
Md. Tofayel islam

1 year ago

1.9k
Responsive registration form
form with social login buttons

Author:
Anonymous

2 years ago

29.2k
mechanical login
mechanical

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

1.3k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

10 months ago

730

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components