Full page sign-In form

This tailwind example is contributed by Anonymous, on 06-Feb-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author Anonymous

Tailwind v3.4 4.4k 5

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

Aman kumar

2 years ago

6k
cards
html , css ,

Hacker Development

1 year ago

1.2k
Sign In page CezeriLab

Sedat Kumcu

1 year ago

1.7k
Login Form
Login Card Structure This code gives you a complete, self-contained login card. Here's what's included: Input Fields: Email and password fields with icons, labels, and placeholder text. The password field includes a "Forgot password?" link. Options & Actions: A "Remember me" checkbox and a prominent "Sign In" button with hover effects. Footer Links: A "Create one" link for new accounts and social login icons (Google and GitHub) for alternative sign-in methods.

Muzammil Riaz

3 months ago

180
login
html , css

Hacker Development

1 year ago

1.3k
LOGIN PAGE OMERLINKS
LOGIN PAGE OMERLINKS

Omer fils ELENGA

1 week ago

11
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.

Rajesh Maheshwari

1 year ago

2k
Modern Neo-Brutalist Login Page – Dark & Light Mode with Tailwind CSS
A bold and functional login interface inspired by Neo-Brutalist design, built with Tailwind CSS. Features crisp typography, high-contrast elements, and smooth interactive states. Fully responsive and ready to integrate into any modern web application.

Homayoun

9 months ago

665
Beautiful sign in form
form with continue with google and continue with github buttons

Anonymous

2 years ago

5.9k
Login Template
its is a basic login template

Sergio Gonzalez

1 year ago

1.1k
Sign up
sign up page

gidy

1 year ago

2k
Login screen
Reward login screen

ehmasuk

1 year ago

971