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

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

Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

1 year ago

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

Author:
muhittin budak

4 months ago

399
login from

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

1.2k
Sign in form

Author:
Simon Scheffer

2 years ago

15.6k
Login/Register Form with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.6k
Login template

Author:
Gabriel Urbano

1 year ago

6k
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Ari Mustofa

1 year ago

2.3k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

6 months ago

1.9k
Sign In form

Author:
Amit Pachange

2 years ago

12k
SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Author:
Rajesh Maheshwari

6 months ago

1.1k
Login form with blured background image

Author:
Noah Schmidt

2 years ago

14.9k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

41.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components