Home
Michael Andreuzza
Login/Register Form with Tailwind CSS and Alpinejs

Login/Register Form with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Michael Andreuzza

2.4k

Fork Fullscreen

<section class="bg-white">
 <div class="w-full mx-auto max-w-xl flex flex-col justify-center py-24   relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl">
   <div>
    <h1>Log in form with password validation</h1>
    <p class="text-balance">
     Fill in the form below to log in to your account, and you will see
     the inputs validation in action.
    </p>
   </div>
  </div>
  <div class="mt-6 border-t pt-12">
   
   <div x-data="{ loginEmail: '', loginPassword: '', passwordPattern: /^(?=.*[A-Z])(?=.*W).+$/, showPassword: false }">
    <form class="w-full divide-neutral-200 rounded-3xl bg-white shadow-2xl border p-8 lg:p-10" x-on:submit.prevent="login">
     <div class="py-2 space-y-3"> <label for="login_email" class="block text-sm text-gray-700">Email</label> <input type="email" id="login_email" x-model="loginEmail" class="block w-full h-12 px-4 py-3 placeholder-gray-500 bg-gray-100 border-0 rounded-lg appearance-none text-blue-500 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 focus:ring-inset focus:ring-2 text-xs" placeholder="Enter your email" required="">
      <p x-show="!loginEmail" class="text-red-500 text-xs mt-1">
       Email is required
      </p>
     </div>
     <div class="py-2 space-y-3"> <label for="login_password" class="block text-sm text-gray-700">Password</label>
      <div class="relative"> <input :type="showPassword ? 'text' : 'password'" id="login_password" x-model="loginPassword" class="block w-full h-12 px-4 py-3 placeholder-gray-500 bg-gray-100 border-0 rounded-lg appearance-none text-blue-500 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 focus:ring-2 focus:ring-inset text-xs" placeholder="Enter your password" required="" type="password"> <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-xs text-gray-400 cursor-pointer" x-text="showPassword ? 'Hide' : 'Show'" @click="showPassword = !showPassword">Show</span> </div>
      <p class="text-gray-500 text-xs mt-1 lg:text-pretty">
       Password must contain at least one capital letter and a special
       character.
      </p>
      <p x-show="loginPassword &amp;&amp; !passwordPattern.test(loginPassword)" class="text-red-500 mt-1 text-xs" style="display: none;">
       Password does not meet requirements
      </p>
     </div>
     <div class="mt-4"> <button type="submit" class="rounded-full bg-blue-600 px-8 py-2 h-12 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 w-full">Login</button> </div>
    </form>
   </div> 
   
   <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
    <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
     <div class="flex w-0 flex-1 items-center p-4">
      <div class="w-full">
       <p class="text-sm font-medium text-neutral-900">Tutorial</p>
       <p class="mt-1 text-sm text-neutral-500">
        How to create a Login/Register Form with Tailwind CSS and
        Alpinejs
       </p>
       <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
         by © Lexington Themes</a> </p>
      </div>
     </div>
     <div class="flex">
      <div class="flex flex-col divide-y divide-neutral-200">
       <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-login-register-form-with-tailwind-and-alpinejs/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
       <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/auth-form/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
      </div>
     </div>
    </div>
   </div> 
  </div>
 </div>
</section>

Related Examples

login page

Author:
Abid Ullah

9 months ago

1.4k
login
login by : html , css

Author:
Hacker Development

4 weeks ago

185
Sign up form
simple full-height register form

Author:
Lukas Müller

2 years ago

11.8k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

1 year ago

15.9k
Sign up Form - Page

Author:
ABDO-SY

3 months ago

337
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

11 months ago

1.8k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

6 days ago

37
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

1 year ago

10k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

8.8k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

1 week ago

30
Login

Author:
Amine Ghanim

1 month ago

588
Tailwind login page

Author:
Kofi Osei

2 years ago

10.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components