Tailwind CSS Login Forms Collection

Explore a collection of responsive login form components built with Tailwind CSS. These examples provide ready-to-use HTML structures for common login interface patterns.

Each component includes a live preview and the corresponding HTML code.

Simple Centered Login

Login

Forgot password?

Don't have an account? Sign up 

<!-- Simple Centered Login Form -->
<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-sm">
    <h2 class="text-2xl font-bold text-center text-gray-800 mb-6">Login</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
        <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="you@example.com" required>
      </div>
      <div class="mb-6">
        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
        <input type="password" id="password" name="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="••••••••" required>
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
        Sign In
      </button>
      <div class="text-center mt-4">
        <a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
      </div>
    </form>
    <p class="text-center text-sm text-gray-500 mt-6">
      Don't have an account? <a href="#" class="text-blue-500 hover:underline font-medium">Sign up</a>
    </p>
  </div>
</div>

Login with Logo

Login with Social Buttons

WPDean

Login to Your Account

OR

New here? Create an account 

<!-- Login Form with Social Buttons -->
<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-sm">
    <div class="text-center mb-6">
      <!-- Optional: Replace with your logo -->
      <span class="text-3xl font-bold text-blue-600">WPDean</span>
    </div>
    <h2 class="text-xl font-semibold text-center text-gray-700 mb-6">Login to Your Account</h2>
    <form>
      <div class="mb-4">
        <label for="email-social" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
        <input type="email" id="email-social" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
      </div>
      <div class="mb-6">
        <label for="password-social" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
        <input type="password" id="password-social" name="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
        Login
      </button>
    </form>

    <div class="flex items-center my-6">
      <hr class="flex-grow border-t border-gray-300">
      <span class="mx-4 text-sm text-gray-500">OR</span>
      <hr class="flex-grow border-t border-gray-300">
    </div>

    <div class="space-y-3">
      <!-- Google Button -->
      <button type="button" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        <!-- Add Google SVG Icon here -->
        <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.574l0.007-0.008l6.19,5.238C39.993,34.699,44,29.891,44,24C44,22.659,43.862,21.35,43.611,20.083z"/></svg>
        Sign in with Google
      </button>
      <!-- Facebook Button -->
      <button type="button" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
        <!-- Add Facebook SVG Icon here -->
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"></path></svg>
        Sign in with Facebook
      </button>
    </div>
    <p class="text-center text-sm text-gray-500 mt-6">
      New here? <a href="#" class="text-blue-500 hover:underline font-medium">Create an account</a>
    </p>
  </div>
</div>

Split Screen Login with Image

WPDean

Login

Welcome back! Please enter your details.

Forgot password?

Don't have an account? Sign up for free 

<!-- Split Screen Login Form -->
<div class="min-h-screen flex">
  <!-- Image Side (Hidden on Small Screens) -->
  <div class="hidden lg:block lg:w-1/2 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/1000?random=1');">
    <!-- Optional: Add overlay with opacity e.g. bg-black bg-opacity-50 -->
    <!-- Optional: Add text content centered within this div -->
  </div>

  <!-- Form Side -->
  <div class="w-full lg:w-1/2 flex items-center justify-center p-8 sm:p-12 bg-white">
    <div class="w-full max-w-md">
       <!-- Optional: Logo can go here -->
       <div class="text-left mb-8">
         <span class="text-3xl font-bold text-blue-600">WPDean</span>
       </div>

      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-4">Login</h2>
      <p class="text-gray-600 mb-8">Welcome back! Please enter your details.</p>

      <form>
        <div class="mb-4">
          <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        </div>
        <div class="mb-6">
          <div class="flex justify-between items-center mb-1">
            <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
            <a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
          </div>
          <input type="password" id="password" name="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        </div>
        <button type="submit" class="w-full bg-blue-500 text-white py-2.5 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
          Sign In
        </button>
      </form>

      <p class="text-center text-sm text-gray-500 mt-8">
        Don't have an account? <a href="#" class="text-blue-500 hover:underline font-medium">Sign up for free</a>
      </p>
    </div>
  </div>
</div>

FAQ on Tailwind CSS Login Forms

How do I create a responsive login form with Tailwind CSS?

Create responsive login designs using Tailwind's utility classes. Start with a container using max-w-md mx-auto. Add w-full to form elements and use px-4 py-2 for spacing. Include md: breakpoint prefixes for specific screen sizes. Mobile-friendly login design requires testing on various devices for optimal user experience.

What are the best practices for styling input fields in Tailwind login forms?

Form element styling should balance aesthetics with usability. Apply border rounded-md focus:ring focus:border-blue-300 for clean focus states. Use consistent padding (p-2 or p-3) and add placeholder-gray-400 for subtle placeholders. Form customization CSS works best when maintaining accessibility standards with proper contrast ratios.

Can I implement dark mode for my Tailwind CSS login form?

Yes! Dark mode login forms improve user experience in low-light environments. Use Tailwind's dark mode variant: dark:bg-gray-800 dark:text-white. Toggle between modes with JavaScript or the prefers-color-scheme media query. Remember to maintain sufficient contrast for form controls in both themes.

How do I handle form validation with Tailwind CSS?

Form validation requires combining Tailwind with JavaScript. Add border-red-500 for error states and use text-red-500 text-sm mt-1 for error messages. Consider Tailwind form plugins for extended functionality. Integrate with validation libraries like Formik or React Hook Form when building larger authentication systems.

What's the best way to style form buttons in Tailwind login interfaces?

Style login form buttons with py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md. Create focus states using focus:outline-none focus:ring. For social login buttons, maintain consistent sizing but use brand colors. Button design influences conversion rates significantly.

How can I create a minimalist login form with Tailwind CSS?

Minimalist login form design relies on spacing and typography. Use space-y-4 between form elements and font-light for elegant text. Keep the login component design simple with subtle shadows (shadow-sm) and minimal borders. Focus on content hierarchy with proper heading styles for the sign-in interface.

What form layout options work best for Tailwind CSS login forms?

Effective form layout responsive design uses flex flex-col for vertical stacking or grid grid-cols-2 for side-by-side fields. Add gap-4 between elements. Structure matters for completion rates. Consider placing labels above inputs using flex flex-col for improved form spacing Tailwind provides.

How do I add custom styling to checkboxes and radio buttons?

Style checkboxes with form-checkbox h-4 w-4 text-blue-600. Customize using focus:ring-blue-500 for focus states. For radio buttons, use form-radio with similar modifiers. These require @tailwindcss/forms plugin for proper styling. Remember checkbox components like "Remember me" enhance login security features.

Can I use Tailwind CSS with frameworks like React for login forms?

React integration works seamlessly with Tailwind. Create reusable authentication UI components using React's component system. Install Tailwind in your React project and use it directly in your JSX. React's state management handles form submission effectively while Tailwind handles the visual styling.

How do I ensure my Tailwind login forms are accessible?

Prioritize web accessibility by adding proper aria- attributes and ensuring sufficient color contrast. Use focus:ring focus:outline-none for visible focus indicators. Include proper form labels with for attributes matching input IDs. WCAG compliance requires testing with screen readers and keyboard navigation.