Home
Anonymous
Full page sign-In form

Full page sign-In form

This tailwind example is contributed by Anonymous, on 06-Feb-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 Anonymous

2.9k

Fork Fullscreen

<div class="bg-green-100 dark:bg-gray-800 h-screen">
  <div class="container mx-auto px-6 py-8">
    <h2 class="text-4xl font-bold text-center text-green-800 dark:text-white mb-8">Welcome to Our Website!</h2>
    <div class="flex flex-wrap items-center">
      <div class="w-full md:w-1/2">
        <h3 class="text-2xl text-green-800 dark:text-white font-bold">Stay connected with us!</h3>
        <p class="text-green-600 dark:text-gray-400 mt-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quia molestias delectus reprehenderit sequi iste ut, quod alias. Consequuntur, quis?</p>
      </div>
      <div class="w-full md:w-1/2 mt-8 md:mt-0">
        <form action="#" class="bg-white dark:bg-gray-900 rounded shadow-md px-8 pt-6 pb-8 mb-4">
          <div class="mb-4">
            <label class="block text-green-700 dark:text-gray-200 text-sm font-bold mb-2" for="username">Username</label>
            <input class="shadow appearance-none border border-green-500 dark:border-gray-700 rounded w-full py-2 px-3 text-green-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
          </div>
          <div class="mb-6">
            <label class="block text-green-700 dark:text-gray-200 text-sm font-bold mb-2" for="password">Password</label>
            <input class="shadow appearance-none border border-green-500 dark:border-gray-700 rounded w-full py-2 px-3 text-green-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
          </div>
          <div class="flex items-center justify-between">
            <button class="bg-green-500 hover:bg-green-700 dark:bg-gray-700 dark:hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">Sign In</button>
            <a class="inline-block align-baseline font-bold text-sm text-green-500 hover:text-green-800 dark:text-gray-200 dark:hover:text-gray-400" href="#">Forgot Password?</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Related Examples

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

Author:
muhittin budak

2 months ago

83
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

3 days ago

12
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

1 year ago

1.8k
login page

Author:
Abid Ullah

9 months ago

1.6k
Login Form

Author:
Maxim

2 months ago

511
Simple Login Page
This component is responsive for Mobile & Desktop & Dark mode Supported.

Author:
Shariar Hasan

1 year ago

2.9k
Sign in form
includes Google login button

Author:
pratik bhajankar

1 year ago

1.6k
Sign up
sign up page

Author:
gidy

4 weeks ago

274
Fullscreen login form with image backround

Author:
Rithik

1 year ago

1.7k
Login form

Author:
Aman kumar

1 year ago

3.5k
login!!!!
html , css

Author:
Hacker Development

1 month ago

195
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

Author:
nicoleshal07

4 weeks ago

30

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components