Simple Login Form

Design a user-friendly login form using Tailwind CSS. Learn how to implement a simple and clean login form that enhances the user experience with minimal effort and stylish design.

Preview
Code

<section class="bg-gray-50">
  <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">
          <img class="w-8 h-8 mr-2" src="https://www.frontendcomponent.com/favicon.ico" alt="frontendcomponent logo">
          Frontend Component    
      </a>
      <div class="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
          <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">
                  Sign in to your account
              </h1>
              <form class="space-y-4 md:space-y-6" action="#">
                  <div>
                      <label for="email" class="block mb-2 text-sm font-medium text-gray-900">Your email</label>
                      <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5" placeholder="username@gmail.com" required="">
                  </div>
                  <div>
                      <label for="password" class="block mb-2 text-sm font-medium text-gray-900">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-blue-600 focus:border-blue-600 block w-full p-2.5" required="">
                  </div>
                  <div class="flex items-center justify-between">
                      <div class="flex items-start">
                          <div class="flex items-center h-5">
                            <input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300" required="">
                          </div>
                          <div class="ml-3 text-sm">
                            <label for="remember" class="text-gray-500">Remember me</label>
                          </div>
                      </div>
                      <a href="#" class="text-sm font-medium text-blue-600 hover:underline">Forgot password?</a>
                  </div>
                  <button type="submit" class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Sign in</button>
                  <p class="text-sm font-light text-gray-500">
                      Don’t have an account yet? <a href="#" class="font-medium text-blue-600 hover:underline">Sign up</a>
                  </p>
              </form>
          </div>
      </div>
  </div>
</section>

```
No Custom CSS
```
```
No need of JavaScript
```

Discover how to create a sleek and functional login form using Tailwind CSS with our easy-to-follow guide. Tailwind CSS simplifies styling by using utility classes, allowing you to focus on functionality rather than design intricacies. Follow these steps to integrate the login form into your website:

Step 1: Copy the Code Snippet

Begin by copying the HTML code snippet for the Simple Login Form provided below. Select the code, click copy, and paste it into your HTML file.

Step 2 :Link Tailwind CSS

Place the script tag inside the <head> tag of your HTML document to link to Tailwind CSS:
```
<script src="https://cdn.tailwindcss.com"></script>
```

Step 3: Customize to Suit Your Needs

Modify the form's appearance by adjusting Tailwind CSS classes like bg-gray-100, rounded-md, and p-4 to match your website's theme and branding.

Step 4: Integrate into Your Project:

Incorporate the login form into your web project seamlessly. Ensure you adapt the form's functionality and styling to align with your site's requirements.

Step 5: Make It Yours:

Personalize the login form further by adding validation scripts, customizing input fields, or integrating it with your backend system for user authentication.

Empower your website with a modern and responsive login form crafted using Tailwind CSS. Follow these steps today to enhance user experience and streamline login processes on your site.

Code Explanation

Section and Container Classes:

.bg-gray-50: Sets a light gray background for the entire section.
.flex, .flex-col, .items-center, .justify-center: Flexbox utilities for centering content vertically and horizontally within their containers (flex-col for column direction).
.px-6, .py-8, .mx-auto: Padding and margin utilities for spacing and centering.
.md:h-screen, .lg:py-0: Responsive height adjustment for medium-sized screens (md:h-screen) and specific padding adjustment for large screens (lg:py-0).

Logo and Title:

.flex, .items-center, .mb-6, .text-2xl, .font-semibold, .text-gray-900: Flexbox layout for logo and title, with text styling for size, weight, and color (text-gray-900).

Form Container:

.w-full, .bg-white, .rounded-lg, .shadow, .md:mt-0, .sm:max-w-md, .xl:p-0: Styles the form container with a white background, rounded corners, shadow effect, and responsive padding adjustments (sm:max-w-md limits width on smaller screens, xl:p-0 removes padding on extra-large screens).

Form Content:

.p-6, .space-y-4, .md:space-y-6, .sm:p-8: Padding and spacing utilities for form content (space-y-* manages vertical spacing between elements).

Form Inputs and Labels:

Input fields (input[type="email"], input[type="password"]) are styled with:
.bg-gray-50, .border, .border-gray-300, .text-gray-900, .sm:text-sm, .rounded-lg: Background color, border, text color, and rounded corners.
.focus:ring-blue-600, .focus:border-blue-600: Focus states with ring and border color changes.
Placeholder text and required attribute for form validation.

Checkbox and Remember Me:

Checkbox (input[type="checkbox"]) styled with .w-4, .h-4, .border, .bg-gray-50, .focus:ring-3, .focus:ring-blue-300: Size, border, background color, and focus ring styles.
Label text (label) for "Remember me" styled with .ml-3, .text-sm, .text-gray-500: Margin, text size, and color.

Forgot Password and Sign Up Links:

.text-sm, .font-medium, .text-blue-600, .hover:underline: Styling for links, including color and underline on hover.

Sign In Button:

.w-full, .text-white, .bg-blue-600, .hover:bg-blue-700, .focus:ring-4, .focus:outline-none, .focus:ring-blue-300, .font-medium, .rounded-lg, .text-sm, .px-5, .py-2.5, .text-center: Button styling with background color, hover effect, focus ring, padding, text alignment, and rounded corners.

Sign Up Link:

.text-sm, .font-light, .text-gray-500: Lighter text color and font weight for secondary text.

Responsive Design:

Media queries like .md:, .sm:, .xl: are used to adjust layout, spacing, and element visibility based on screen size (md:, sm:, xl: prefixes adjust styles for medium, small, and extra-large screens, respectively).