Home
pratik bhajankar
Sign in form

Sign in form

includes Google login button

This tailwind example is contributed by pratik bhajankar, on 07-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author pratik bhajankar

1.7k

Fork Fullscreen

<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
    <a href="/" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
      <img class="w-8 h-8 mr-2" src="https://www.svgrepo.com/show/335276/oldelectrum-logo.svg" alt="osher.ai logo">
          
    </a>
    <div
      class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
      <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
        <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white text-center">
          Sign In Access
        </h1>
        <h2 class="text-center"> You must become  a member to Login and access <h2/>
<h2  class="text-center " > the entire site<h2/>

<div>
            <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email Address</label>
            <input type="email" name="login" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-teal-600 focus:border-teal-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required="">
          </div>
          <div>
            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
            <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-teal-600 focus:border-teal-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
          </div>
          <div class="flex items-center justify-between">
            <div class="flex items-start">
             
             
            </div>
            <a href="" class="text-sm font-medium text-teal-600 hover:underline dark:text-teal-500">Forgot password?</a>
          </div>

<p class="text-sm text-center text-gray-500 dark:text-gray-400">
            Not a member yet? <a href=""
              class="font-medium text-teal-600 hover:underline dark:text-teal-500">Sign up</a>
          </p>
        </form>

</div>
    </div>
  </div>

</section>

Related Examples