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

3.4k

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

Responsive login form
form with social login buttons

Author:
Anonymous

1 week ago

37
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

7 months ago

990
Login form

Author:
Leon Bachmann

2 years ago

15.2k
Registration Form

Author:
Maxim

10 months ago

1k
Login Form
Login Form With google icon

Author:
Md. Tofayel islam

1 year ago

1.8k
Login Form

Author:
UI-Templates

3 months ago

223
Login Card

Author:
Anonymous

2 years ago

6.9k
Register form

Author:
Maxim

1 year ago

1.4k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

3 years ago

50k
Login form
login form with sign in with Google button

Author:
gmer33

2 years ago

23.5k
Simple login page template

Author:
Freja Jensen

2 years ago

12.6k
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

8 months ago

947

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components