Home
Amit Pachange
Sign In form

Sign In form

This tailwind example is contributed by Amit Pachange, on 21-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author Amit Pachange

11.7k

Fork Fullscreen

<form class="max-w-md ">
    <div>
        <label for="email" class="block font-semibold">Email</label>
        <div class="mt-1"><input type="text" name="email" id="email" value="" autofocus="autofocus" class="bg-white shadow-sm ring-0 block w-full text-lg focus:outline-none focus:border-tan-500 border-tan-300 p-2 border-2">
        </div>
    </div>
    <div class="mt-6">
        <div class="flex justify-between">
            <label for="password" class="block font-semibold">Password</label> <a href="" tabindex="-1"
                class="branded-link text-sm font-semibold">Forgot your password?</a>
        </div>
        <div class="mt-1">
            <input type="password" name="password" id="password" class="bg-white shadow-sm ring-0 block w-full text-lg focus:outline-none focus:border-tan-500 border-tan-300 p-2 border-2">
        </div>
    </div>

<label class="mt-8 flex content-start"><input type="checkbox" name="remember" class="mr-2 form-checkbox rounded-none ring-0 focus:border-tan-500 border-tan-300 border-2 w-5 h-5 text-highlight"> 
      <span class="text-sm font-semibold">Remember me</span>
    </label>
    <div>
        <button class="flex flex-no-wrap mt-6 border-2 border-black bg-yellow-500 py-2 px-4">
            <span>Sign In</span> 
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 w-6 h-6"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            </span>
        </button>
    </div>
</form>

Related Examples

Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

2 years ago

48.8k
Responsive login form with image

Author:
Lukas Müller

2 years ago

14.2k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

2 years ago

22.1k
Fullscreen login form with image backround

Author:
Noah Schmidt

2 years ago

20.2k
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Ari Mustofa

10 months ago

2.1k
Search form section with a background SVG gradient

Author:
TailwindFlex

2 years ago

13.9k
Sign-In Form with Tailwind CSS
Elegant sign in form

Author:
Carlos

9 months ago

987
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.7k
create event modified
it is the layout for creating an event

Author:
seth dridi

10 months ago

1.5k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

4 months ago

665
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

2 months ago

157
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

1 week ago

24

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components