DocsAllOver Clean and Simple Responsive Login Page with Tailwind CSS Snippets

Clean and Simple Responsive Login Page with Tailwind CSS

Oct. 1, 2024

Tailwind, Responsive, Login Page, Clean UI

Full Screen

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
    <div class="font-[sans-serif]">
        <div class="min-h-screen flex fle-col items-center justify-center py-6 px-4">
          <div class="grid md:grid-cols-2 items-center gap-4 max-w-6xl w-full">
            <div class="border border-gray-300 rounded-lg p-6 max-w-md shadow-[0_2px_22px_-4px_rgba(93,96,127,0.2)] max-md:mx-auto">
              <form class="space-y-4">
                <div class="mb-8">
                  <h3 class="text-gray-800 text-3xl font-extrabold">Sign in</h3>
                  <p class="text-gray-500 text-sm mt-4 leading-relaxed">Sign in to your account and explore a world of possibilities. Your journey begins here.</p>
                </div>
  
                <div>
                  <label class="text-gray-800 text-sm mb-2 block">User name</label>
                  <div class="relative flex items-center">
                    <input name="username" type="text" required class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600" placeholder="Enter user name" />
                  </div>
                </div>
                <div>
                  <label class="text-gray-800 text-sm mb-2 block">Password</label>
                  <div class="relative flex items-center">
                    <input name="password" type="password" required class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600" placeholder="Enter password" />
                    
                  </div>
                </div>
  
                <div class="flex flex-wrap items-center justify-between gap-4">
                  <div class="flex items-center">
                    <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" />
                    <label for="remember-me" class="ml-3 block text-sm text-gray-800">
                      Remember me
                    </label>
                  </div>
  
                  <div class="text-sm">
                    <a href="jajvascript:void(0);" class="text-blue-600 hover:underline font-semibold">
                      Forgot your password?
                    </a>
                  </div>
                </div>
  
                <div class="!mt-8">
                  <button type="button" class="w-full shadow-xl py-3 px-4 text-sm tracking-wide rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
                    Log in
                  </button>
                </div>
  
                <p class="text-sm !mt-8 text-center text-gray-800">Don't have an account <a href="javascript:void(0);" class="text-blue-600 font-semibold hover:underline ml-1 whitespace-nowrap">Register here</a></p>
              </form>
            </div>
            <div class="lg:h-[400px] md:h-[300px] max-md:mt-8">
              <img src="https://readymadeui.com/login-image.webp" class="w-full h-full max-md:w-4/5 mx-auto block object-cover" alt="Dining Experience" />
            </div>
          </div>
        </div>
      </div>
</body>
</html>

Doesn't require any CSS.

Doesn't require any JS.

This snippet provides a clean and user-friendly login page design built using Tailwind CSS. The responsive layout ensures optimal viewing on various devices, while the minimalist aesthetic creates a focused user experience. Tailwind CSS is utilized to efficiently style the page elements, offering a wide range of customizable options.

Key Features:

Responsive Design: The page adapts seamlessly to different screen sizes, providing a consistent experience across devices.
Clean and Minimalist Layout: The uncluttered design focuses user attention on the essential login fields.
Tailwind CSS Styling: Tailwind's utility-first approach enables rapid and efficient styling, allowing for easy customization.
Placeholder Text: Helpful placeholder text guides users in filling out the login form.
Button Styling: The login button features a visually appealing design to encourage user interaction.

Implementation:

Include Tailwind CSS: Add the necessary Tailwind CSS files to your HTML page.
Create the Basic Structure: Set up the HTML elements for the login form, including input fields for username and password, and a submit button.

Latest Snippets

View All