<script src="https://cdn.tailwindcss.com"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <body class="bg-gray-50 min-h-screen flex items-center justify-center p-4"> <div class="w-full max-w-md" x-data="{ showPassword: false, loading: false }"> <div class="bg-white rounded-lg shadow-md p-8"> <!-- Header --> <div class="text-center mb-8"> <h1 class="text-2xl font-bold text-gray-900 mb-2">Welcome Back</h1> <p class="text-gray-600 text-sm">Please sign in to your account</p> </div> <!-- Form --> <form @submit.prevent="loading = true; setTimeout(() => loading = false, 2000)" class="space-y-6"> <!-- Email Input --> <div> <label for="email" class="block text-sm font-medium text-gray-700 mb-2"> Email Address </label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <ion-icon name="mail-outline" class="text-gray-400"></ion-icon> </div> <input type="email" id="email" required class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="you@example.com" > </div> </div> <!-- Password Input --> <div> <label for="password" class="block text-sm font-medium text-gray-700 mb-2"> Password </label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <ion-icon name="lock-closed-outline" class="text-gray-400"></ion-icon> </div> <input :type="showPassword ? 'text' : 'password'" id="password" required class="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="••••••••" > <button type="button" @click="showPassword = !showPassword" class="absolute inset-y-0 right-0 pr-3 flex items-center" > <ion-icon :name="showPassword ? 'eye-off-outline' : 'eye-outline'" class="text-gray-400 hover:text-gray-600 transition-colors" ></ion-icon> </button> </div> </div> <!-- Remember Me & Forgot Password --> <div class="flex items-center justify-between"> <label class="flex items-center"> <input type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> <span class="ml-2 text-sm text-gray-600">Remember me</span> </label> <a href="#" class="text-sm text-blue-600 hover:text-blue-700 font-medium"> Forgot password? </a> </div> <!-- Submit Button --> <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors font-medium flex items-center justify-center" :disabled="loading" > <span x-show="!loading">Sign In</span> <span x-show="loading" class="flex items-center"> <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> Signing in... </span> </button> <!-- Divider --> <div class="relative my-6"> <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> <!-- Social Login Buttons --> <div class="grid grid-cols-2 gap-3"> <button type="button" class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors" > <ion-icon name="logo-google" class="text-red-500 mr-2"></ion-icon> <span class="text-sm font-medium text-gray-700">Google</span> </button> <button type="button" class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors" > <ion-icon name="logo-github" class="text-gray-900 mr-2"></ion-icon> <span class="text-sm font-medium text-gray-700">GitHub</span> </button> </div> </form> <!-- Sign Up Link --> <p class="mt-8 text-center text-sm text-gray-600"> Don't have an account? <a href="#" class="text-blue-600 hover:text-blue-700 font-medium">Sign up</a> </p> </div> </div>
Login to leave a comment
No comments yet. Be the first!
No comments yet. Be the first!