View file Chatvia - Tailwind CSS/layouts/auth-login.html

File size: 5.97Kb
<!DOCTYPE html>
<html lang="en" dir="ltr" class="group" data-theme-color="violet" data-mode="light">

<head>
    <meta charset="utf-8" />
    <title>Login - Tailwind CSS Chat App Template</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta
      content="Tailwind Admin & Dashboard Template"
      name="description"
    />
    <meta content="" name="Themesbrand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico" />

    <!-- magnific-popup css -->
    

    <!-- owl.carousel css -->
    

    

    
    
    
    

  <link rel="stylesheet" href="assets/css/tailwind2.css">
</head>

<body class="bg-violet-100/30 dark:bg-zinc-700">
   
    <div class="w-full h-full">
        <div class="px-5 py-24 sm:px-24 lg:px-0">
            <div class="grid items-center justify-center grid-cols-1 lg:grid-cols-12 auth-bg">
                <div class="mx-5 lg:mx-20 lg:col-start-5 lg:col-span-4">
                    <div class="text-center">
                        <a href="index.html" class="block mb-10">
                            <img src="assets/images/logo-dark.png" alt="" class="block h-8 mx-auto dark:hidden">
                            <img src="assets/images/logo-light.png" alt="" class="hidden h-8 mx-auto logo-light dark:block">
                        </a>
                    
                        <h4 class="mb-2 text-gray-800 text-21 dark:text-gray-50">Sign in</h4>
                        <p class="mb-6 text-gray-500 dark:text-gray-300">Sign in to continue to Chatvia.</p>
                    </div>
                    <div class="bg-white card dark:bg-zinc-800 dark:border-transparent">
                        <div class="p-5">
                            <div class="p-4">
                                <form action="index.html">
                    
                                    <div class="mb-5">
                                        <label class="font-medium text-gray-700 dark:text-gray-200">Username</label>
                                        <div class="flex items-center mt-2 mb-3 rounded-3 bg-slate-50/50 dark:bg-transparent">
                                            <span class="flex items-center px-4 py-2 text-gray-500 border border-r-0 border-gray-100 rounded rounded-r-none dark:border-zinc-600" id="basic-addon3">
                                                <i class="ri-user-2-line text-16"></i>
                                            </span>
                                            <input type="text" class="w-full border-gray-100 rounded rounded-l-none placeholder:text-14 bg-slate-50/50 text-14 focus:ring-0 dark:bg-zinc-700 dark:border-zinc-600 dark:text-gray-200" placeholder="Enter Username" aria-label="Enter Username" aria-describedby="basic-addon3">
                                        </div>
                                    </div>
                    
                                    <div class="mb-6">
                                        <div class="float-right">
                                            <a href="auth-recoverpw.html" class="text-gray-500 text-13 ">Forgot password?</a>
                                        </div>
                                        <label class="font-medium text-gray-700 dark:text-gray-200">Password</label>
                                        <div class="flex items-center mt-2 mb-3 rounded-3 bg-slate-50/50 dark:bg-transparent">
                                            <span class="flex items-center px-4 py-2 text-gray-500 border border-r-0 border-gray-100 rounded rounded-r-none dark:border-zinc-600" id="basic-addon4">
                                                <i class="ri-lock-2-line text-16"></i>
                                            </span>
                                            <input type="password" class="w-full border-gray-100 rounded rounded-l-none placeholder:text-14 bg-slate-50/50 text-14 focus:ring-0 dark:bg-zinc-700 dark:border-zinc-600 dark:text-gray-200" placeholder="Enter Password" aria-label="Enter Password" aria-describedby="basic-addon4">
                    
                                        </div>
                                    </div>
                    
                                    <div class="flex items-center mb-6">
                                        <input type="checkbox" class="border-gray-100 rounded focus:ring-1 checked:ring-1 focus:ring-offset-0 focus:outline-0 checked:bg-violet-500 dark:bg-zinc-600 dark:border-zinc-600 dark:checked:bg-violet-500 " id="memberCheck1">
                                        <label class="font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-200" for="remember-check">Remember me</label>
                                    </div>
                    
                                    <div class="grid">
                                        <button class="py-2 text-white border-transparent btn bg-violet-500 hover:bg-violet-600 text-16" type="submit">Sign in</button>
                                    </div>
                    
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-10 text-center">
                        <p class="mb-5 text-gray-700 dark:text-gray-200">Don't have an account ? <a href="auth-register.html" class="fw-medium text-violet-500"> Signup now </a> </p>
                        <p class="text-gray-700 dark:text-gray-200">© <script>document.write(new Date().getFullYear())</script> Chatvia. Crafted with <i class="text-red-500 mdi mdi-heart"></i> by Themesbrand</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="assets/libs/jquery/jquery.min.js"></script>
    <script src="assets/libs/@popperjs/core/umd/popper.min.js"></script>
    <script src="assets/libs/simplebar/simplebar.min.js"></script>
</body>

</html>