Clean and Simple Responsive Login Page with Tailwind CSS
<!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.
Responsive Contact Us Section in Tailwind CSS
File Upload Form with Tailwind CSS
Bootstrap 4 Login Form with Social Media Integration
Simple Catalog Card Template Using Bootstrap 4 with Hover Effect
Product Card Grid with Images and Pricing in Tailwind
Customer Testimonial Grid in Dark Mode with Tailwind CSS
E-commerce Product Card in Detail Template with Bootstrap 4
Dual Design Registration Form in Bootstrap 4
Bootstrap 4 Responsive Categories Card with Hover Effects
Bootstrap 4 Toggle Switch with Custom Text Labels
Bootstrap 5 Features Catalog with Use Cases
Fancy User Login Form in Bootstrap 5 with Background Gradient Color
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.